单击div，淡入div，单击div或div外部淡出div(Click div, fade in div, click div OR outside div to fade out div)

所以我有一些代码，我知道有效，这使得当你按下div时它会打开第二个div（设置为display：none in css）。然后单击您单击的相同div打开第二个div以关闭它（淡出）。

但是，我希望能够这样做，这样你就可以点击OUTSIDE然后它会淡出。我已经尝试了很多代码，但我无法让它工作。请帮忙！

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

So I have a little code, that I know works, that makes it so when you press on a div it opens a second div (which is set to display: none in css). You then click on the same div that you click to open the second div to close it (fade out).

However, I want to be able to make it so you can click OUTSIDE and it would fade out. I've tried numerous of codes, yet I cannot get it working. Please help!

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

最满意答案

向文档添加一个单击事件，如果该框不可见，则通过单击#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(); }); });

在这里拨弄。

Add a click event to the document that, if the box is not already invisible, checks that it did not get triggered by clicking #dashboardbox or #dashbox (would trigger toggle twice) or any of their children. If all is well it will then fade out the box.

$(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.

更多推荐