Question

所以我有一些代码，我知道有效，当你按下div时它会打开第二个div（在css中设置为display：none）。然后单击您单击的同一个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

向文档添加一个click事件，如果该框尚未隐藏，则通过单击#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

2 个答案: