jQuery slidetoggle如何設置鼠標是否單擊其他，關閉slidetoggle

Question

我使用jQuery slidetoggle顯示DIV

但是我需要設置如果不在div.list單擊鼠標，請關閉此幻燈片

$( "#list_button" ).click(function() {
        $( ".list" ).slideToggle( "fast" );
 });

我僅在將鼠標移出時才找到...。如果單擊任何“頁面上的任意位置”以關閉此切換開關，我將找不到如何設置的方法

用於測試： http : //jsfiddle.net/sdgwbyv8/

Answer 1

$( "body" ).click(function( event ) {

    if(
        event.target.className!='list' && event.target.parentNode.parentNode.className!="list"

    ) {
         $( ".list" ).slideToggle('fast');
    }
});

演示： http : //jsfiddle.net/sdgwbyv8/9/一種可能的解決方案，我想還有更好的解決方案。

Answer 2

您可以通過event.stopPropagation() ：

$("#list_button").click(function (event) {
    if ($(".list").is(":hidden")) {
        event.stopPropagation();
        $(".list").slideToggle("fast");
    } 
});

$('body').click(function () {
    $(".list").hide();
});
$(".list").click(function (event) {
    event.stopPropagation();
});

工作小提琴