单击 div，淡入 div，单击 div 或在 div 外淡出 div

Question

所以我有一些我知道有效的代码，当你按下 div 时，它会打开第二个 div（设置为显示：none 在 css 中）。然后单击打开第二个 div 的同一个 div 以将其关闭（淡出）。

不过，我希望能够做到这一点，这样您就可以单击 OUTSIDE，它就会淡出。我已经尝试了很多代码，但我无法让它工作。请帮忙！

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

Answer 1

您可以通过附加一个额外的处理程序来做到这一点，该处理程序 fadeOut div 无论它是否可见

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

DEMO

Answer 2

向文档添加一个点击事件，如果该框尚未隐藏，则检查它是否没有被点击#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();
    });
});

Fiddle here.

单击 div，淡入 div，单击 div 或在 div 外淡出 div

Click div, fade in div, click div OR outside div to fade out div

html

jquery

click

fade