切換下拉菜單並在外部單擊隱藏

Question

我得到了可以使用的下拉菜單，但是當我在菜單外部單擊時，我也希望它關閉...我嘗試了一些答案的解決方案，但是出了點問題，我無法弄清楚。.有人可以指出我錯過了什么這里？ 非常感謝

 $("#toggle").on('click', function() { $(".dropdown").toggleClass("dropdown--visible"); }); $(document).click(function(){ $(".dropdown").hide(); }); $(".dropdown").click(function(e){ e.stopPropagation(); }); 

 .dropdown { background: red; display: none; } .dropdown--visible { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggle">Toggle dropdown</button> <div class="dropdown"> <ul> <li>one</li> <li>two</li> </ul> </div> 

Answer 1

 $("#toggle").on('blur click', function() { $(".dropdown").toggleClass("dropdown--visible"); }); $(document).click(function(){ }); 

 .dropdown { background: red; display: none; } .dropdown--visible { display: block!important; } .dropdown--invisible { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggle">Toggle dropdown</button> <div class="dropdown"> <ul> <li>one</li> <li>two</li> </ul> </div> 

Answer 2

您已經為文檔設置了單擊事件偵聽器，當您單擊任意位置時，它將一直執行。 您可以使用通用類過濾掉下拉事件。

<button id="toggle" class="dd">Toggle dropdown</button>

<div class="dropdown dd">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

---

$(document).click(function(e){
  if (!$(e.target).hasClass('dd')) {        
    $(".dropdown").removeClass("dropdown--visible");
  }
});

也最好不使用hide （）而使用removeClass（） ，因為hide（）添加了display：none; 直接到元素，將很難控制。

Answer 3

此香草味解決方案使用handleDropdown函數來檢查兩個條件：
-是否點擊了切換按鈕？
-下拉菜單當前隱藏嗎？

如果兩者都為真，則顯示下拉列表。 否則，它將隱藏下拉菜單。

 const dropdown = document.getElementsByClassName("dropdown")[0], toggle = document.getElementById("toggle"); document.addEventListener("click", handleDropdown); function handleDropdown(event){ if(event.target == toggle && dropdown.style.display != "block"){ dropdown.style.display = "block"; } else{ dropdown.style.display = "none"; } } 

 .dropdown { background: red; display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggle">Toggle dropdown</button> <div class="dropdown"> <ul> <li>one</li> <li>two</li> </ul> </div>