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();
});

工作小提琴