javascript - 除了在打开的元素上以外的任何地方进行点击时，如何关闭元素？

Question

我正在尝试制作在单击按钮时打开的面板。我有按钮，我有面板。随着click()事件它确实打开。当再次按下该按钮时，它会关闭。

$('#button').click(function() {

    $('#panel').toggle();
});

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

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

$('#button').mouseenter(function() {

    $('#panel').show();

}).mouseleave(function() {

    setTimeout(function() {
        $('#panel').hide();
    }, 2000);
});

Answer 1

$(
    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] 不是

1. 按钮elm.is("#button")
2. 面板elm.is("#panel")
3. 面板中的任何元素elm.parents("#panel").length>0

Answer 2

试试这个

$('#button').click(function(e) {

    $('#panel').toggle();
    e.stopPropagation();

});

$('#panel').click(function(e) {

    e.stopPropagation();

});

$(document.body).click(function(e) {
    if($('#panel').is(":visible")){
      $('#panel').hide();
    }
});

Answer 3

对您的要求的直接答复是

$('body').click(function(e)

   var starter = $(e.target);
   if ( starter.is('#button, #panel') || starter.closest('#panel').length > 0 ) return;

   setTimeout(function() {
       $('#panel').hide();
   }, 2000);

})

---

但是看到你试图用 mouseout 做的事情，你可能会认为这是一种更好的方法

$('#button').click(function() {

    $('#panel').show();

});

$('#panel').mousenter(function() {

    var closetimer = $(this).data('closetimer');  // retrieve the timer if it exists
    clearTimeout(closetimer); // and clear the timeout when we re-enter to cancel the closing

}).mouseleave(function() {

    var closetimer = setTimeout(function() {
        $('#panel').hide();
    }, 2000);

    $(this).data('closetimer', closetimer); // store the timer with the panel so we can cancel it if we need

});

Answer 4

在面板后面有一个不可见的元素，它占据了 100% 的屏幕（或页面）。该元素将被赋予单击事件，该事件将自行关闭任何面板。

这也将防止单击以关闭面板触发站点其余部分的任何其他操作。

如果您愿意，您还可以将分层元素设为灰色和半透明，这将使您在显示面板时产生重影网站其余部分的效果。Javascript 弹出框脚本经常使用这种效果，您几乎可以免费使用它，因为您已经放置了全屏元素；你只需要设计它的样式。