在点击外部元素时关闭面板，如果面板是可见的

jQuery - Toggle a panel closed on click of outside element, only if panel is visible

本文关键字：如果 外部 元素      更新时间：2023-09-26

我正在做这个网站:http://dev.rjlacount.com/treinaAronson/index.php

我最后要做的是设置联系人面板(你可以看到，如果你点击左上角的"联系人"按钮)关闭，如果它目前是打开的，用户要么点击面板外(在"#content"区域)或按esc键。

我认为在#content区域触发器中点击是比较容易的，所以我从它开始。我读过几个线程触发函数只有当元素是可见的，但我已经提出了到目前为止根本不工作:

$("#panel").is(":visible") {
  $("#content").click(function(){
    $("#panel").slideToggle("3000");
  });
};

这破坏了联系人按钮的功能，我尝试了几种不同的方法，但都无济于事。我这里有什么明显的错误吗?如有任何建议，不胜感激。

谢谢!

将Click和Keydown函数绑定到文档，并确保当单击面板或翻转按钮时click函数不会冒泡到文档。像这样:

$(document).bind({
    keydown:function(e) {
        if (e.keyCode == 27 ) {
            $("#panel").slideUp("3000");
        }
    }, click: function(e) {
        $("#panel").slideUp("3000");
    }
});
$('#flip, #panel').bind('click', function(e){return false});

为什么不在面板打开时为页面主体添加一个类，在面板关闭时删除它呢?这样就简单多了:

$('.class #content').click(function(){
// Close the contact panel
});

现在，当正文有一个class' class'类时，任何点击#contentdiv都会自动关闭联系。

有意义吗?顺便说一下，这个网站很好看。

$('#flip').bind('click', function(){
    $(this).toggleClass('contactOpen');
    $("#panel").slideToggle("3000");
});
$('#content').bind('click', function(){
    if($('#flip').hasClass('contactOpen')){
        $(this).toggleClass('contactOpen');
        $("#panel").slideToggle("3000");
    }
});
相关文章：