Question

此代码启用下拉单击，但它只在我按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;
    }

Answer 1

你想使用这样的东西：

Json()

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

JSFiddle

Answer 2

您必须抓住与所单击按钮对应的<ol>，并仅在该按钮上切换该类。您还需要将事件侦听器添加到{em>所有的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>

香草Javascript下拉列表

2 个答案: