• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed hide/show element w pętli javascript

0 głosów
59 wizyt
pytanie zadane 4 dni temu w JavaScript przez AnimaVillis Gaduła (3,490 p.)
zamknięte 3 dni temu przez AnimaVillis

Cześć!

Mam kilka boxów, które przyjmują taką formę:

<a class="toggle morebtn" href="#more'. $u['hash'] .'">?</a>

Teraz oczywiście w pętli php wywołuję całość z dodatkowymi informacjami. Jednakże chciałbym aby te dodatkowe informacje były wyświetlane po kliknięciu w ten znak zapytania. Niestety próbowałem już kilku togglerów i żaden nie działał jak powinien.

Jakieś podpowiedzi?

komentarz zamknięcia: Odpowiedzi argeento i VBService rozwiązują cały problem :)

1 odpowiedź

+2 głosów
odpowiedź 4 dni temu przez argeento VIP (110,780 p.)
wybrane 3 dni temu przez AnimaVillis
 
Najlepsza

Może wystarczy rozwiązanie natywne?

komentarz 3 dni temu przez AnimaVillis Gaduła (3,490 p.)
Byłoby idealnie tylko przy włączeniu innego details potrzebuję schować poprzedni
komentarz 3 dni temu przez AnimaVillis Gaduła (3,490 p.)

@argeento, znalazłem całkiem dobre rozwiązanie tego o czym pisałem wcześniej i dziękuję Ci za ten tag.

<script>
function thisindex(elm){
  var nodes = elm.parentNode.childNodes, node;
  var i = 0, count = i;
  while( (node=nodes.item(i++)) && node!=elm )
    if( node.nodeType>=1 ) count++;
  return count;
}

function closeAll(index){
  var len = document.getElementsByTagName("details").length;

  for(var i=0; i<len; i++){
    if(i != index){
      document.getElementsByTagName("details")[i].removeAttribute("open");
    }
  }}
</script>

Niestety pierwszy tag details się nie zamyka w sensie kliknę pierwszy i powiedzmy 5/6/7 to 5/6/7 się zamknie a pierwszy pozostaje cały czas otwarty, coś tu w kodzie nie tak?

komentarz 3 dni temu przez VBService Mędrzec (171,270 p.)
edycja 3 dni temu przez VBService

To może tak za pomocą event delegation

 

przykład

<details>
  <summary>Details</summary>
  <div>
    Something small enough to escape casual notice.
  </div>
</details>

<details>
  <summary>Details</summary>
  <div>
    Something small enough to escape casual notice.
  </div>
</details>

<details>
  <summary>Details</summary>
  <div>
    Something small enough to escape casual notice.
  </div>
</details>

<details>
  <summary>Details</summary>
  <div>
    Something small enough to escape casual notice.
  </div>
</details>
details[open] div {
  width: 22em;
  margin: 0.2em 0;
  padding: 0.5em;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: 0.3em double rgba(0,0,0,0.4);
  text-align: center;
  font: 400 0.9em/1.1 system-ui, monospace;
}
let timeoutID;
window.onload = load;

function load() {
  document.body.onclick = closeDetailsOpen;
  
  function closeDetailsOpen(e) {
    if (e.target.nodeName == 'SUMMARY') {
      const all_details = [...document.querySelectorAll('details')];
      all_details.map((d) => (d.removeAttribute('open')));
      clearTimeout(timeoutID);
      timeoutID = setTimeout(_=> { e.target.parentNode.removeAttribute('open'); }, 2000);
    }
  }
}

 

komentarz 3 dni temu przez AnimaVillis Gaduła (3,490 p.)
Super a jeszcze gdybyś mi powiedział jak zrobić, żeby działało gdy się kliknie ponownie na ten sam detail? Bo obecnie mi go nie chowa niestety.
komentarz 3 dni temu przez VBService Mędrzec (171,270 p.)

Zauważyłem problem i na prędce zrobiłem taki workaround  smiley

clearTimeout(timeoutID);
timeoutID = setTimeout(_=> { e.target.parentNode.removeAttribute('open'); }, 2000);

w tym przypadku po 2 sekundach sam się zamyka, ale rozumiem, że chcesz mieć rozwiązanie, że zamyka ponowne kliknięcie w obecnie otwarty.

1
komentarz 3 dni temu przez AnimaVillis Gaduła (3,490 p.)
Tak dokładnie, czas już sobie zmieniłem żeby nie znikało zbyt szybko na 30 sekund :)
komentarz 3 dni temu przez VBService Mędrzec (171,270 p.)

Sprawdź to

let timeoutID;
window.onload = load;

function load() {
  document.body.onclick = closeDetailsOpen;

  function closeDetailsOpen(e) {
    if (e.target.nodeName == 'SUMMARY') {
      const current_status = e.target.parentNode.hasAttribute('open');
      if (current_status) e.preventDefault();

      const all_details = [...document.querySelectorAll('details')];
      all_details.map((d) => (d.removeAttribute('open')));

      clearTimeout(timeoutID);
      timeoutID = setTimeout(_=> { e.target.parentNode.removeAttribute('open'); }, 30000);

      if (current_status) {
        clearTimeout(timeoutID);
        e.target.parentNode.removeAttribute('open');
      }
    }
  }
}

 

1
komentarz 3 dni temu przez AnimaVillis Gaduła (3,490 p.)
Działa idealnie!
Dziękuję! :)

Podobne pytania

0 głosów
3 odpowiedzi 112 wizyt
pytanie zadane 29 marca 2018 w JavaScript przez Paweł Barszcz Użytkownik (950 p.)
0 głosów
1 odpowiedź 144 wizyt
pytanie zadane 19 września 2016 w JavaScript przez niezalogowany

88,311 zapytań

136,904 odpowiedzi

305,517 komentarzy

58,593 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...