代码之家 › 专栏 › 技术社区 › matt

jQuery:hide()框,而不是元素本身?

jquery javascript

matt · 技术社区 · 12 年前

我有一个 <a href="#" id="btn">Show Box</a> 在我的DOM中的某个位置。此外,我还有一个 div#overlay 默认情况下设置为 display:none; .

// Toggle Overlay
$('#btn').click(function(e) {
    e.preventDefault();
    $('#overlay').toggle();
})

$('body').not('#btn, #overlay').click(function() {
    if ( $('#overlay').is(':visible') ) $('#overlay').hide();
});

为什么不起作用?我想要 #btn 单击时切换()覆盖。但是,当覆盖可见并且我单击文档上的任何位置时(除了 #顺便说一句 本身或 #overlay )我希望覆盖也被隐藏起来。

2 回复 | 直到 12 年前

techfoobar 12 年前

您正在捕获 click 上 body 它本身就是从不 #btn 或 #overlay ,因此无法按预期工作。相反,你需要检查的是 event.target

即

$('body').click(function(e) {
    var target = $(e.target);
    if(!target.is('#btn') && !target.is('#overlay')) {
       if ( $('#overlay').is(':visible') ) $('#overlay').hide();
    }
});

Anujith 12 年前

使用 event.target.id 用于比较单击区域的 id

$('body').click(function(e) {
   if(e.target.id != 'btn' && e.target.id != 'overlay')
      if ( $('#overlay').is(':visible') ) $('#overlay').hide();
})

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前