香草Javascript下拉菜单

Question

此代码启用点击时下拉，但它仅在我按 ABC 链接时添加类，当我尝试将类添加到 GHI 时.drop没有任何反应。我也找到了如何使用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;
    }

编辑：这是我制作的香草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');
      }
  }
}

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

JSFiddle

Answer 2

您必须抓住与单击的按钮相对应的<ol>，并仅在该按钮上切换类。您还需要将事件侦听器添加到所有ul li a元素，而不仅仅是第一个元素。为此，您可以将querySelectorAll()与forEach结合使用

var btns = document.querySelectorAll('ul li a');
btns.forEach(function (btn) {
  var parent = btn.parentNode;
  var drp = parent.querySelector("ol"); // get closest <ol>
  btn.onclick = function()
  {
      // make sure drp is not null
      if (drp) {
        drp.classList.toggle('drop');
      }
  }
});

.drop
{
  display: block;
}
ol {
  display: none;
}

<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>
<script>
    
</script>