除了打开的元素之外，如何在点击时关闭元素？(How to close element when click is made everywhere except on opened element?)

我正在尝试使面板在单击按钮时打开。 我有按钮，我有面板。 使用click()事件，它会打开。 再次按下该按钮时，它会关闭。

$('#button').click(function() { $('#panel').toggle(); });

我希望实现这一点，如果用户点击除#button或#panel之外的任何地方，它也会关闭。

PS我试过这样的事情，但这不是想要的行为。

$('#button').mouseenter(function() { $('#panel').show(); }).mouseleave(function() { setTimeout(function() { $('#panel').hide(); }, 2000); });

I'm trying to make panel that opens when it's clicked on the button. I have the button, I have the panel. With click() event it does open. When that button is pressed again, it does close.

$('#button').click(function() { $('#panel').toggle(); });

I want to achieve that if user clicks everywhere except on #button or #panel, it does close too.

P.S. I tried something like this, but it's not the wanted behavior.

$('#button').mouseenter(function() { $('#panel').show(); }).mouseleave(function() { setTimeout(function() { $('#panel').hide(); }, 2000); });

最满意答案

$( function(){ $("#button").click( function(){ $("#panel").toggle(); } ); $(document).click( function(e){ var elm = jQuery(e.target); if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return; $("#panel").hide(); }); } );

例

检查以确保单击的元素[ e.target ]不是

按钮elm.is("#button") 面板elm.is("#panel") 面板中的任何元素elm.parents("#panel").length>0 $( function(){ $("#button").click( function(){ $("#panel").toggle(); } ); $(document).click( function(e){ var elm = jQuery(e.target); if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return; $("#panel").hide(); }); } );

Example

Checks to make sure that the element that was clicked [e.target] is not

The button elm.is("#button") The panel elm.is("#panel") Any element in the panel elm.parents("#panel").length>0除了打开的元素之外，如何在点击时关闭元素？(How to close element when click is made everywhere except on opened element?)

我正在尝试使面板在单击按钮时打开。 我有按钮，我有面板。 使用click()事件，它会打开。 再次按下该按钮时，它会关闭。

$('#button').click(function() { $('#panel').toggle(); });

我希望实现这一点，如果用户点击除#button或#panel之外的任何地方，它也会关闭。

PS我试过这样的事情，但这不是想要的行为。

$('#button').mouseenter(function() { $('#panel').show(); }).mouseleave(function() { setTimeout(function() { $('#panel').hide(); }, 2000); });

I'm trying to make panel that opens when it's clicked on the button. I have the button, I have the panel. With click() event it does open. When that button is pressed again, it does close.

$('#button').click(function() { $('#panel').toggle(); });

I want to achieve that if user clicks everywhere except on #button or #panel, it does close too.

P.S. I tried something like this, but it's not the wanted behavior.

$('#button').mouseenter(function() { $('#panel').show(); }).mouseleave(function() { setTimeout(function() { $('#panel').hide(); }, 2000); });

最满意答案

$( function(){ $("#button").click( function(){ $("#panel").toggle(); } ); $(document).click( function(e){ var elm = jQuery(e.target); if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return; $("#panel").hide(); }); } );

例

检查以确保单击的元素[ e.target ]不是

按钮elm.is("#button") 面板elm.is("#panel") 面板中的任何元素elm.parents("#panel").length>0 $( function(){ $("#button").click( function(){ $("#panel").toggle(); } ); $(document).click( function(e){ var elm = jQuery(e.target); if(elm.is("#button") || elm.is("#panel") || elm.parents("#panel").length>0)return; $("#panel").hide(); }); } );

Example

Checks to make sure that the element that was clicked [e.target] is not

The button elm.is("#button") The panel elm.is("#panel") Any element in the panel elm.parents("#panel").length>0