Question

目前我有一个带有 5 个下拉选项卡的导航栏。我确实让 JS 工作，它会打开菜单并关闭它们，但只有在再次单击相同的选项卡时。我正在尝试关闭它们，正如我所说的，当您单击整个菜单外部或单击不同的选项卡时。我一直在这里、MDN、W3 和许多其他地方进行梳理以实现这一目标，但这些选项都不适用于我。我对 JS 也有些陌生，所以如果我没有正确解释某些内容，我深表歉意。

我将为其中一个下拉列表提供 HTML，因为其他所有下拉列表都相同。我不知道你是否需要我拥有的 CSS，因为它非常广泛。

         <li class="drop" id="col"><a href="#">
              <h2 class="category">13 Colonies</h2>
            </a>
            <ul class="links" id="13Colonies">
              <li><a href="#">New Hampshire</a></li>
              <li><a href="#">Massachusetts</a></li>
              <li><a href="#">Connecticut</a></li>
              <li><a href="#">Rhode Island</a></li>
              <li><a href="#">New York</a></li>
              <li><a href="#">New Jersey</a></li>
              <li><a href="#">Pennsylvania</a></li>
              <li><a href="#">Delaware</a></li>
              <li><a href="#">Maryland</a></li>
              <li><a href="#">Virginia</a></li>
              <li><a href="#">North Carolina</a></li>
              <li><a href="#">South Carolina</a></li>
              <li><a href="#">Georgia</a></li>
            </ul>
          </li>

我的菜单 JS 如下，以及我最近尝试隐藏菜单：

for (const e of h2) {
    e.addEventListener("click", dropDown);
}

function dropDown(e) {
    const ulId = document.getElementById((e.target.textContent).replace(" ", ""));
    if (ulId.className === "dropDown") {
        ulId.classList.remove("dropDown");
    // } else if (ulId.className !== "dropDown") {
    //     ulId.classList.remove("dropDown");
    } else {
        ulId.className = "dropDown";
    }
}

如果我遗漏了您可能需要的任何关键细节，例如我拥有的更多 HTML 或 JS，或者如果您需要我的任何 CSS，请告诉我。

感谢您提供的任何帮助。

单击下拉菜单外部并单击另一个下拉菜单时如何关闭下拉菜单

0 个答案: