zoukankan      html  css  js  c++  java
  • 点击页面其它地方将某个显示的DIV隐藏(改进)

    背景:上周写的《点击页面其它地方将某个显示的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=" 200px">
            <div class="language_selected">
                中文(简体)</div>
            <div class="language_list">
                <ul>
                    <li>中文(简体)</li>
                    <li>English</li>
                </ul>
            </div>
        </div>
        <div id="noPopEvent" style=" 100px; height: 100px; border: 1px solid black;">
            点击我,不隐藏语言列表
        </div>
  • 相关阅读:
    选择适合什么模式
    Filter做用户授权的例子
    分析LogFilter
    理解session
    XML定义用途
    web服务后台应用工作原理
    企业级应用和互联网应用的区别
    轻量级Java EE企业应用实战的目标
    软件工程期末项目总结
    软件工程之学习报告
  • 原文地址:https://www.cnblogs.com/dataadapter/p/2594645.html
Copyright © 2011-2022 走看看