多个下拉菜单在导航栏中不起作用

Question

我正在处理一个菜单，它有多个下拉菜单，而且它也是移动响应式的。 在移动视图中，只有第一个下拉菜单有效，不知道 js 有问题吗？ 附上小提琴链接以供参考

Js Fiddle Link

 <li><a href="">Menu item</a></li>
       <li class="dropdown"><a href="#">Dropdown 2</a>
        <ul>
          <li><a href="">Dropdown item 1</a></li>
          <li><a href="">Dropdown item 2</a></li>
          <li><a href="">Dropdown item 3</a></li>
          <li class="dropdown second-level"><a href="#">2nd level dropdown</a>
          </li>
          <li><a href="">Dropdown item 3</a></li>
          <li><a href="">Dropdown item 4</a></li>
        </ul>
      </li>

Answer 1

在您的 Javascript 代码中，您只选择了类为 dropdown 的第一个元素。您需要修改它以选择具有该类的所有元素。

[...document.querySelectorAll('.dropdown a')].forEach(function (item) {
  item.addEventListener("click", function (e) {
    this.nextElementSibling.classList.toggle("show"), this.parentNode.classList.toggle("active"), e.stopPropagation();
  });
});