我的页面上有一个信息气泡。用户可以通过单击图标来打开它,我希望他们能够通过单击正文中的任何位置来关闭它。
我不知道如何触发打开事件,因为父级总是关闭气泡。我尝试了 $('body').not('.i-icon')
但这是不对的。有什么建议吗?
$(document).ready(function () {
var iIsOpen = false;
$('body').not('.i-icon').click(function () {
if (iIsOpen == true) {
//alert('close bubble');
$('.i-narrow').hide();
iIsOpen = false;
}
});
$('.i-icon').click(function () {
//alert('open bubble');
$('.i-narrow').show();
iIsOpen = true;
});
});
最佳答案
您可以像这样缩短代码:
$(document).ready(function () {
$(document).on('click',function (e) {
$('.i-narrow').hide();
});
$('.i-icon').click(function (e) {
e.stopPropagation();
$('.i-narrow').show();
});
});
所以基本上,当您单击文档中的任何位置时,您的 .i-narrow
将被隐藏
但是,如果您单击 .i-narrow
本身,click
事件将在 DOM 树上冒泡,从而触发 click
code> 事件也在 document
级别发生,并且 .i-narrow
中的结果将再次隐藏。
这就是为什么你需要使用 e.stopPropagation() 的原因 在这里防止您的点击事件冒泡。
<强> Updated Fiddle
关于javascript - 如何在 JQ 中显示一个 block ,然后在单击主体时将其隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22074596/