Click event afhandeling

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ben Pastoor

Ben Pastoor

14/01/2021 13:32:59
Quote Anchor link
Goedemiddag,

Wie kan mij helpen met het volgende:


Ik heb een menu gemaakt als je op het LI element klikt dat het child element zichtbaar word.
Klik je op een ander dan word de lijst wat de class show heeft onzichtbaar gemaakt door show te verwijderen hide toe te voegen.

Wat mij niet lukt is als je een tweede keer op de zelfde klikt dat deze dan ook onzichtbaar word.
Ik wil dus eigenlijk een toggle maken op een element en dat de niet geklikte parent daarvan de child elementen onzichtbaar worden gemaakt


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<div class="parent" data="one">
  <div class="child hide" id="one">
    test
  </div>
</div>

<div class="parent" data="two">
  <div class="child hide" id='two'>
    test 2
  </div>
</div>



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
  parent[i].addEventListener("click", function () {
    var child = document.getElementsByClassName("child");
    var attribute = this.getAttribute("data");
    var the_element = document.getElementById(attribute);
    for (var is = 0; is < child.length; is++) {
      child[is].classList.add('hide');
      child[is].classList.remove('show');
    }
    the_element.classList.add('show');
  });
}
 
PHP hulp

PHP hulp

25/10/2021 13:05:04
 
Jop B

Jop B

15/01/2021 02:20:22
Quote Anchor link
Je mist in je code een stuk of er gekeken word naar het child element van het geklikte parent element.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
  parent[i].addEventListener("click", function () {
    var child = document.getElementsByClassName("child");
    var attribute = this.getAttribute("data");
    var the_element = document.getElementById(attribute);
    if(this.children[0].classList.contains('show')){
      this.children[0].classList.add('hide');
      this.children[0].classList.remove('show');
     return;
    }
    for (var is = 0; is < child.length; is++) {
      child[is].classList.add('hide');
      child[is].classList.remove('show');
    }
      the_element.classList.add('show');
      the_element.classList.remove('hide');
  });
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.