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

Question

我是 js 新手，这是我第一次使用 nextSibling 选择器，我正在尝试实现下拉菜单。在下面的代码中，我需要在单击菜单项时显示子菜单。我怎样才能解决这个问题？

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

您要查找的不是 nextSibling，因为它会为您提供同一级别的下一个节点。您应该在其中搜索 nav-sec-level 并切换可见。

样本

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>

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

How the next sibling works?

html

javascript

nextsibling

样本