用戶使用Java腳本在外部單擊時關閉下拉菜單

Question

我正在嘗試創建單擊即可打開的下拉菜單。 這是通過將.active類添加到基本顯示菜單的.dropdown-trigger.on-click類元素中來完成的。 到目前為止，一切正常，但是當用戶單擊已打開的下拉菜單之外的任何地方時，我都不怎么能關閉已打開的下拉菜單。 到目前為止，我的代碼如下所示：

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

 .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);