javascript - Vanilla Javascript下拉列表

这段代码启用了onclick下拉菜单，但是仅当我按ABC链接并且试图将.drop类添加到GHI时才添加类。我也找到了解决方案如何使用jQuery，但是我需要这个香草JS，请不要jQuery。

的HTML

<ul>
    <li><a href="javascript:">ABC</a>
        <ol>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ol>
    </li>
    <li><a href="#">DEF</a></li>
    <li><a href="javascript:">GHI</a>
        <ol>
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
        </ol>
    </li>
    <li><a href="#">JKL</a></li>
    <li><a href="#">MNO</a></li>
</ul>

的JavaScript

<script>
    var btn = document.querySelector('ul li a');
    var drp = document.querySelector('ol');
    btn.onclick = function()
    {
        drp.classList.toggle('drop');
    }
</script>

的CSS

.drop
    {
    display: block;
    }

编辑：
这是我制作的Vanilla JS下拉列表：https://jsfiddle.net/vh6tywjs/11/

最佳答案

您想使用如下形式：

var btn = document.querySelectorAll('ul li a');
for(var b = 0; b < btn.length; b++){
  btn[b].onclick = function()
  {
      if(this.parentNode.querySelector('ol') != null){
        this.parentNode.querySelector('ol').classList.toggle('drop');
      }
  }
}

当单击锚链接时，获取包含的li，然后搜索ol，然后切换类放置。否则，drp将始终返回文档中的第一个ol。您需要使用querySelectorAll来选择所有匹配的元素，如注释中所述。最后，您需要将onclick事件应用于每个锚链接。

JSFiddle