通過onlick觸發div時如何切換/隱藏它？

Question

當我單擊DIV 1時，它顯示下拉列表。 現在，當我單擊默認選項卡或單擊頁面上的其他任何位置以關閉下拉菜單時，我想隱藏下拉菜單。 我該如何為此編寫JavaScript代碼？

的HTML

<div id="dropdown-container">
    <div id="default-tab" onclick="toggleMenu()"><a href="#">1</a></div>
        <ul id="dropdown">
            <li ><a href="#"><span class="current-browse">2</span></a>
                <ul class="dropdown-items">
                    <li class="dropdown-item"><a href="#">3</a></li>
                    <li class="dropdown-item""><a href="#">4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Java腳本

function toggleMenu() {
    var dropDown = document.getElementById('dropdown');    
    if(dropdown.style.display == "block") { 
         dropdown.style.display = "none";
    } else { 
         dropdown.style.display = "block";
    }
}

下拉式CSS顯示如下：none；

Answer 1

鏈接： http ： //stackoverflow.com/questions/321239/event-on-a-click-everywhere-on-the-page-outside-of-the-specific-div。

您可以使用上面鏈接中的一種解決方案。 您所需要的只是一種向document對象的onclick事件添加處理程序的方法。

當DIV 1上發生onclick事件時，您的代碼已經可以正常工作，除了第一次單擊時不起作用。 因此，只需將以下內容添加到ur標記中，這樣它在第一次也可以正常工作。

<ul id="dropdown" style="display:block;">

Answer 2

本文很好地解釋了您所面臨的問題，以及為什么stopPropagation解決方案不是一個好主意。 由於您沒有使用JQuery，因此您想要做的事情看起來像這樣：

document.onclick = function(event) {
  if (!event.target.closest('#dropdown-container')) {
    dropdown.style.display = "none";
  }
}

將其放在您的toggleMenu函數之外，每當單擊頁面上的其他任何內容時，它都應該隱藏菜單，而不會為其他庫創建意外行為（錯誤）。