您的位置:首页 > 其它

点击页面其它地方将某个显示的DIV隐藏(改进)

2012-07-17 09:24 471 查看
// $(document).ready(function() {
//语言头部的点击事件,显示语言列表
$(".language_selected").click(function(e) {
$(".language_list").toggle();

});

//点击所有元素时,判断如果不是显示的触发元素,则隐藏
$("*").click(function(event) {
if (event.target.className != "language_selected") {
$(".language_list").hide();
}
});

//测试有阻止事件冒泡时,能否隐藏DIV
$("#noPopEvent").click(function(e) {
e.stopPropagation();
});
});
// ]]>

背景:上周写的《点击页面其它地方将某个显示的DIV隐藏》有一个bug,即当页面中如果也有元素阻止事件冒泡那么则点击时不会隐藏弹出的DIV(原文点击页面其它地方将某个显示的DIV隐藏),经十年灯指点,改进如下:

先看效果:

点击我

中文(简体)

English

点击我,我有阻止事件冒泡也可以隐藏弹出的DIV
JS:

View Code

<div style="width: 200px">
<div class="language_selected">
中文(简体)</div>
<div class="language_list">
<ul>
<li>中文(简体)</li>
<li>English</li>
</ul>
</div>
</div>
<div id="noPopEvent" style="width: 100px; height: 100px; border: 1px solid black;">
点击我,不隐藏语言列表
</div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: