下一个兄弟姐妹如何工作？

Question

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 1

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>