Question

我正在使用香草JavaScript制作响应式下拉导航栏。在移动视图中，我希望单击一个下拉列表时，另一个应该关闭。 JavaScript在这里：

dropbtns.forEach(link => {
  link.addEventListener("click", function(e) {
    e.currentTarget.nextElementSibling.classList.toggle("showdd");
  });
});

并显示下拉列表：

  .showdd {
    height: auto;
  }

html代码：

<div class="nav-container">
    <div class="brand">
        <a href="#!">Logo</a>
    </div>
    <nav>
        <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
        <ul id="nav-list">
            <li>
                <a href="#!">Home</a>
            </li>
            <li>
                <a href="#!">About</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Services <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Pricing</a>
            </li>
            <li class="dropdown">
                <a href="#!" class='dropbtn'>Portfolio <i class="fas fa-sort-down"></i></a>
                <ul class="nav-dropdown">
                    <li>
                        <a href="#!">Web Design</a>
                    </li>
                    <li>
                        <a href="#!">Web Development</a>
                    </li>
                    <li>
                        <a href="#!">Graphic Design</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Contact</a>
            </li>
        </ul>
    </nav>
</div>

完整代码可在here中找到。

Answer 1

因此，如果要在单击某个其他.nav-dropdown时将其折叠，则只需要：

存储当前元素.nav-dropdown的引用（以供以后比较）
切换其类（就像您已经在做的一样）
遍历DOM树中的所有其他.nav-dropdown并对其进行遍历。如果它们与当前引用不匹配，则说明该下拉列表属于另一个链接，您可以删除该类

请牢记以下代码：

dropbtns.forEach(link => {
  link.addEventListener('click', e => {
    const ownDropdown = e.currentTarget.nextElementSibling;
    ownDropdown.classList.toggle('showdd');

    document.querySelectorAll('.dropbtn + .nav-dropdown').forEach(el => {
      if (el !== ownDropdown)
        el.classList.remove('showdd');
    });
  });
});

Answer 2

在我编辑以下行后，它可在您的Codepen上使用。

links.forEach(link => {
  link.addEventListener("click", function(e) {
    links.forEach(link => {
      link.nextElementSibling.classList.remove("showdd"); // Here
    });
    e.currentTarget.nextElementSibling.classList.toggle("show");
  });
});

顺便问一下，“ showdd”是什么？

单击另一个后关闭下拉菜单

2 个答案: