White Maskers White Maskers - 19 days ago 9
HTML Question

How the next sibling works?

I'm new on js and this is the first time I'm using the

nextSibling
selector, I'm trying to implement a dropdown menu. In the code below, I need to display the sub-menu when I click on a menu item. How can I fix this?



var k=document.getElementsByClassName("menu-title");
for(i=0;i < k.length ;i++)
{
k[i].addEventListener("click",function(){
//alert("hai");
this.nextSibling.style.display = "block";
});
}

html,body {
width:100%;
height:100%;
}

navbar{
width:100%;
height:50%;
background-color:green;
float:left;
}

main{
float:left;
width:100%;
height:50%;
background-color:yellow;

}
.nav-sec-level{
color:white;
background-color:aqua;
display:none;
}
.menu-title{
cursor : pointer;
}


<navbar>
<ul>
<li class="menu-title">Fruits
<ol class="nav-sec-level">
<li>Mango</li>
<li>Apple</li>
</ol>
</li>
<li class="menu-title">Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li class="menu-title">Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li class="menu-title">Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Birds
<ol class="nav-sec-level">
<li>Kiwi</li>
<li>Dove</li>
</ol>
</li>
<li>Colours
<ol class="nav-sec-level">
<li>Red</li>
<li>Green</li>
</ol>
</li>
</ul>
</navbar>
<main>
</main>




Answer

What you are looking for is not nextSibling as it will give you next node at same level. You should search inside this for nav-sec-level and toggle visible.

Sample

var k = document.querySelectorAll(".menu-title");
for (i = 0; i < k.length; i++) {
  k[i].addEventListener("click", function() {
    var subMenu = this.querySelector('.nav-sec-level');
    if(subMenu.style.display === 'block')
      subMenu.style.display = 'none';
    else
      subMenu.style.display = 'block'
  });
}
html,
body {
  width: 100%;
  height: 100%;
}
navbar {
  width: 100%;
  height: 50%;
  background-color: green;
  float: left;
}
main {
  float: left;
  width: 100%;
  height: 50%;
  background-color: yellow;
}
.nav-sec-level {
  color: white;
  background-color: aqua;
  display: none;
}
.menu-title {
  cursor: pointer;
}
<navbar>
  <ul>
    <li class="menu-title">Fruits
      <ol class="nav-sec-level">
        <li>Mango</li>
        <li>Apple</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li class="menu-title">Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Birds
      <ol class="nav-sec-level">
        <li>Kiwi</li>
        <li>Dove</li>
      </ol>
    </li>
    <li>Colours
      <ol class="nav-sec-level">
        <li>Red</li>
        <li>Green</li>
      </ol>
    </li>
  </ul>
</navbar>
<main>
</main>

Comments