CODEWITHSUNDEEP
javascript
user3473628
user3473628

Reputation: 113

Getting the element for a Dropdown Menu

want to build a Dropdown Menu. On "click" the submenu should be toggle "show-subnav".

This is my code:

<ul class="mainnav">
  <li>First<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Second<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Third</>
</ul>

and this is my JavaScript:

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(plusButton => {
  plusButton.addEventListener("click", () => {
    // How could I get the child from the mainnav li 
    // to toggle a class like:
    subnavi.classList.toggle("show-subnav");
  });
});

I want to toggle a class to the specific submenu-ul. But always get only the first submenu-ul.

Thanks

Upvotes: 1

Views: 160

Answers (2)

K&#233;vin Bibollet
K&#233;vin Bibollet

Reputation: 3623

Take a look at Node.parentElement and parentNode.children, and you will be able to get your <ul>:

// Inside your forEach()
plusButton.addEventListener("click", function () {
    // Get parent <li> of plusButton
    let li = this.parentElement,

    // Get <li> children (so <ul> should be in it right?)
        liChildren = li.children;

    // Filters liChildren to get your <ul>
});

The keyword this will not reference the clicked plusButton if you use an arrowed function.

Upvotes: 3

Adder
Adder

Reputation: 5878

This can be solved using parentElement and querySelectorAll:

const toggle = document.querySelectorAll(".toggle");

toggle.forEach(plusButton => {
  plusButton.addEventListener("click", () => {
    plusButton.parentElement.querySelectorAll(".subnav").forEach(subnavi => {
      console.log(subnavi);
	    subnavi.classList.toggle("show-subnav");
	}); 
  });
 });
<ul class="mainnav">
  <li>First<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Second<span class="toggle">+</span>
    <ul class="subnav">
      <li>Subnav I</li>
      <li>Subnav II</li>
      <li>Subnav III</li>
    </ul>
  </li>
  <li>Third</li>
</ul>

Upvotes: 1

Related Questions