jQuery使事件僅在可見div時可用，而在div不可見時將其禁用

Question

我有一個dropdown（ .dropdown ）div，當我單擊.open時會打開：

HTML：

<div class="open">Open</div>
<div class="dropdown">Dropdown</div>

jQuery的：

$(".open").click(function(){
    $(".dropdown").show();
});

一旦下拉列表打開，當我在.dropdown div之外單擊時，我將使用此jQuery腳本將其關閉：

$(document).click(function(){
    $('.dropdown').hide();
    console.log('click');
});

$('.open, .dropdown').click(function(e){
    e.stopPropagation();
});

問題是即使div不可見，也會執行document的click事件。 現在，我可以在執行.hide()方法之前檢查div是否可見，但是是否有解決方案在div可見時激活文檔上的事件並在div隱藏時取消激活該事件？

Answer 1

看來您仍然需要將click事件綁定到文檔以隱藏下拉菜單。 因此，如何做類似的事情：

   $(document).ready(function(){
    $(document).click(function(e){
     if ($(e.target).hasClass("open")) $(".dropdown").show();
     else $(".dropdown").hide();
    });
   });

更加簡潔，您不必擔心事件傳播。