单击div，淡入div，单击div或外部div以淡出div。

Question

所以我有一小部分代码，我知道它很有用，所以当你按下一个div时，它会打开第二个div (它被设置为显示:在css中没有)。然后单击相同的div以打开第二个div来关闭它(淡出)。

但是，我希望能够做到这一点，这样你就可以点击外部，它就会淡出。我已经尝试了无数的密码，但我无法让它工作。请帮帮我！

$(document).ready(function() {
    $("#dashbox").click(function() {
        $("#dashboardbox").fadeToggle();
    });
});

Answer 1

向文档中添加一个单击事件，如果该框尚未不可见，则通过单击#dashboardbox或#dashbox (将触发两次)或它们的任何子节点来检查该事件是否触发。如果一切顺利，它就会淡出盒子。

$(document).ready(function() {
    $(document).click(function(e) {
        // Skip if already hidden
        if(!$('#dashboardbox').is(":visible"))
            return;

        // Skip if clicked dashbox or its children
        if ($(event.target).closest('#dashbox').length)
            return;

        // Skip if clicked dashboardbox or its children
        if ($(event.target).closest('#dashboardbox').length)
            return;

        // Fade out
        $("#dashboardbox").fadeOut();
    });

    $("#dashbox").click(function(e) {
        $("#dashboardbox").fadeToggle();
    });
});

小提琴在这里。

Answer 2

您可以通过附加一个附加的处理程序来完成这一任务，该处理程序将fadeOut该div，而不管它是否可见。

$("body").click(function(e) {
        if(e.target.id != "dashbox"){
            $("#dashboardbox").fadeOut();
        }
    });

演示