当用户使用Javascript在外部单击时关闭下拉菜单

Question

我试图创建下拉菜单，点击打开。这是通过添加来完成的。活动的类到。下拉触发器。单击class elements，基本上显示菜单。到目前为止，一切正常，但我真的不明白当用户单击打开的菜单之外的任何地方时，如何关闭打开的下拉菜单。到目前为止，我的代码如下所示：

document.querySelectorAll(".dropdown-trigger.on-click").forEach(function(elem) {
    elem.addEventListener("click", function() {
        this.classList.toggle("active");
    })
})

css lang-css prettyprint-override">.dropdown {
    display: inline-block;
    position: relative;
}
.dropdown .dropdown-menu {
    display: none;
    position: absolute;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    background-color: #ffffff;
    z-index: 1;
}
.dropdown .dropdown-menu ul {
    padding: 0;
    margin: 0;
}
.dropdown .dropdown-menu ul > li {
    list-style: none;
    margin: 0;
}
.dropdown .dropdown-menu ul > li.dropdown-menu-content {
    padding: 0.6rem 1.2rem;
    white-space: nowrap;
}
.dropdown .dropdown-menu ul > li.dropdown-menu-divider {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
}
.dropdown .dropdown-menu ul > li > a {
    display: block;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    white-space: nowrap;
    min-width: 12rem;
}
.dropdown .dropdown-menu ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.025);
}
.dropdown .dropdown-trigger.on-click.active + .dropdown-menu {
    display: block;
}

<div class="dropdown">
    <button class="dropdown-trigger on-click">Pick your weapon <i class="fa fa-angle-down"></i></button>
    <div class="dropdown-menu">
        <ul>
            <li class="dropdown-menu-content">
                Weapons
            </li>
            <li class="dropdown-menu-divider"></li>
            <li><a href="#">Sword</a></li>
            <li><a href="#">Lance</a></li>
            <li><a href="#">Axe</a></li>
            <li><a href="#">Bow</a></li>
        </ul>
    </div>
</div>

<div class="dropdown">
    <button class="dropdown-trigger on-click">Pick your class <i class="fa fa-angle-down"></i></button>
    <div class="dropdown-menu">
        <ul>
            <li class="dropdown-menu-content">
                Classes
            </li>
            <li class="dropdown-menu-divider"></li>
            <li><a href="#">Fighter</a></li>
            <li><a href="#">Archer</a></li>
            <li><a href="#">Thief</a></li>
            <li><a href="#">Ninja</a></li>
        </ul>
    </div>
</div>

注意：当用户单击打开的菜单时，该菜单不应关闭。只有当用户在打开的菜单外单击时，它才应关闭。

我如何使用普通的Javascript做到这一点？感谢任何帮助。

Answer 1

这将在文档中添加一个单击按钮，检查按钮是否被单击。如果没有，它将检查是否有活动下拉列表，并使其处于非活动状态。

document.addEventListener('click', function (event) {

    // Return if clicking on trigger
    if (event.target.matches('.dropdown-trigger')) {
      return;
    }

    document.querySelectorAll(".dropdown-trigger.active").forEach(function(elem) {
       elem.classList.remove('active');
    })

}, false);