javascript - 使用纯 Javascript 单击页面上的任意位置来关闭元素

Question

我有一个菜单，它会在单击标题时打开一个子导航，我试图通过单击页面上除打开元素以外的任何地方来关闭该标题。

我的代码片段如下:

function showSubMenu(show, hide1, hide2, hide3, hide4) {
  document.getElementById(show).className = "subNavShow";
  document.getElementById(hide1).className = "subNavHide";
  document.getElementById(hide2).className = "subNavHide";
  document.getElementById(hide3).className = "subNavHide";
  document.getElementById(hide4).className = "subNavHide";
}

.subNavHide {
  display: none;
}

.subNavShow {
  display: block;
}

<ul class="topnavList" id="siteTopnavList">
  <li>
    <a onclick="showSubMenu('text1','text2','text3','text4','text5')" href="javascript:void(0);">Nav 1</a>
    <article id="text1" class="subNavHide">
      <ul>
        <li><a href="#">Sub Nav 1</a></li>
      </ul>
    </article>
  </li>
  <li>
    <a onclick="showSubMenu('text2','text1','text3','text4','text5')" href="javascript:void(0);">Nav 2</a>
    <article id="text2" class="subNavHide"> text2 </article>
  </li>
  <li>
    <a onclick="showSubMenu('text3','text1','text2','text4','text5')" href="javascript:void(0);">Nav 3</a>
    <article id="text3" class="subNavHide"> text3 </article>
  </li>
  <li>
    <a onclick="showSubMenu('text4','text1','text2','text3','text5')" href="javascript:void(0);">Nav 4</a>
    <article id="text4" class="subNavHide"> text4 </article>
  </li>
  <li>
    <a onclick="showSubMenu('text5','text1','text2','text3','text4')" href="javascript:void(0);">Nav 5</a>
    <article id="text5" class="subNavHide"> text5 </article>
  </li>
</ul>

理想情况下，我想为此使用纯 Javascript，但如果 Jquery 是绝对必要的，那么我也可以接受

Answer 1

在我看来，使用当前实现最简单的方法是向文档添​​加一个点击事件监听器，并使用 .closest 确定被点击的元素是否是打开的元素:

document.addEventListener(`click`, hideSubMenus);

function hideSubMenus(event) {
    if (!event.target.closest(`.topnavList li a, .subNavShow`)) {
        document.getElementById(`text1`).className = `subNavHide`;
        document.getElementById(`text2`).className = `subNavHide`;
        document.getElementById(`text3`).className = `subNavHide`;
        document.getElementById(`text4`).className = `subNavHide`;
        document.getElementById(`text5`).className = `subNavHide`;
    }
}

closest 然而与旧版浏览器不兼容:https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

但我可能会向链接添加类并向它们添加事件监听器，而不是使用“onclick”属性。这样，例如，如果您将“subNavLink”类添加到每个链接，您可以使用循环来处理链接，而不是为每个链接重复同一行:

let links, i, n;
links = document.getElementsByClassName(`subNavLink`);
for (i = 0, n = links.length; i < n; i++) {
    links[i].addEventListener(`click`, showSubMenu);
}

function showSubMenu(event) {
    let currentLink, i, link, n;
    currentLink = event.currentTarget;
    for (i = 0, n = links.length; i < n; i++) {
        link = links[i];
        if (link === currentLink) {
            // this link was clicked, so we have to show its submenu
            link.nextElementSibling.className = `subNavShow`;
        } else {
            // this link was not clicked, so we have to hide its submenu
            link.nextElementSibling.className = `subNavHide`;
        }
    }
}

通过这样做，您可以将 hideSubMenus 函数更改为:

function hideSubMenus(event) {
    let i, n;
    if (!event.target.closest(`.subNavLink, .subNavShow`)) {
        for (i = 0, n = links.length; i < n; i++) {
            links[i].nextElementSibling.className = `subNavHide`;
        }
    }
}