jQuery按鈕打開列表，當點擊外部列表時關閉列表

Question

我知道關於這個問題有十幾個問題，但它們都不適合我。我試圖爲下面的代碼：

jQuery('.mybutton').click(function(){ 

    jQuery('.list').show().bind('click', function(event){ 
    event.stopPropagation(); 
    }); 

    jQuery('html').bind('click', function() { 
    jQuery('.list').hide(); 
    }); 
}); 

列表項永遠不會打開。 html綁定點擊總是被觸發。

Answer 1

代替將click綁定到html和.list，將其全局綁定，並檢查當前目標是否爲.list元素的子元素。

jQuery('.mybutton').click(function(){ 
    jQuery(window).click(function(event) { 
     var $elem = $(event.target) 
     if($elem.hasClass('list') || $elem.parents('.list').length == 0) return; 
     jQuery('.list').hide(); 
    }); 
}); 

Answer 2

您不應該像這樣真的在點擊上綁定事件。試試像這樣的東西。

jQuery('.mybutton').click(function(e){ 
    jQuery('.list').show(); 
    e.stopPropagation(); 
}); 

jQuery('body').click(function() { 
    jQuery('.list').hide(); 
}); 

jQuery('.list').click(function(e){ 
    e.stopPropagation(); 
}); 

我認爲主要的問題是，你需要在你的myButton的點擊處理程序stopPropagation通話了。