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

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

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

我想实现的是,如果用户单击#button#panel之外的所有位置,它也会关闭。

附言我尝试了类似的方法,但这不是想要的行为。
$('#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();
        });
    }
);

Example

检查以确保未单击[e.target]的元素
  • 按钮elm.is("#button")
  • 面板elm.is("#panel")
  • 面板中的任何元素elm.parents("#panel").length>0
  • 09-10 10:56
    查看更多