• 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

VPS Starter Arubacloud
0 głosów
154 wizyt
pytanie zadane 20 czerwca 2022 w JavaScript przez AnimaVillis Stary wyjadacz (11,190 p.)
zamknięte 21 czerwca 2022 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ź 21 czerwca 2022 przez niezalogowany
wybrane 21 czerwca 2022 przez AnimaVillis
 
Najlepsza

Może wystarczy rozwiązanie natywne?

komentarz 21 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 p.)
Byłoby idealnie tylko przy włączeniu innego details potrzebuję schować poprzedni
komentarz 21 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 p.)

@niezalogowany, 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 21 czerwca 2022 przez VBService Ekspert (251,210 p.)
edycja 21 czerwca 2022 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 21 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 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 21 czerwca 2022 przez VBService Ekspert (251,210 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 21 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 p.)
Tak dokładnie, czas już sobie zmieniłem żeby nie znikało zbyt szybko na 30 sekund :)
komentarz 21 czerwca 2022 przez VBService Ekspert (251,210 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 21 czerwca 2022 przez AnimaVillis Stary wyjadacz (11,190 p.)
Działa idealnie!
Dziękuję! :)

Podobne pytania

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

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...