Question

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

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

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

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

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

$('#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();
        });
    }
);

Example

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

按钮elm.is("#button")
小组elm.is("#panel")
面板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％。该元素将被赋予click事件，该事件将自己关闭任何面板。

这也可以防止点击关闭面板，从而触发网站其余部分的任何其他操作。

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

除了打开的元素之外，如何在任何地方点击关闭元素？

4 个答案: