代码改变世界

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

2012-07-17 09:24  Mike.Jiang  阅读(1580)  评论(0编辑  收藏  举报

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

先看效果:

点击我
  • 中文(简体)
  • English
点击我,我有阻止事件冒泡也可以隐藏弹出的DIV

 JS:

View Code
            //语言头部的点击事件,显示语言列表
            $(".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();
            });

CSS:

View Code
        .language_selected
        {
            cursor: pointer;
        }
        .language_list
        {
            border: 1px solid black;
            display: none;
        }
        .language_list li
        {
            cursor: pointer;
            border: 1px solid red;
        }

HTML:

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>