javascript - Vanilla Javascript 下拉菜单

Question

此代码启用下拉 onclick，但它仅在我按 ABC 链接时添加类，而当我尝试将 .drop 类添加到 GHI 时，没有任何反应。我还找到了如何使用 jQuery 执行此操作的解决方案，但我需要这个 vanilla JS，no 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/

Answer 1

你想使用这样的东西:

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');
      }
  }
}

当您单击 anchor 链接时，获取包含 li 的内容，然后搜索 ol，然后切换类别下降。否则 drp 将始终返回文档中的第一个 ol。您需要 querySelectorAll 来选择评论中提到的所有匹配元素。最后，您需要将 onclick 事件应用于每个 anchor 链接。

JSFiddle