• 点击页面其它地方将某个显示的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>
  • 相关阅读:
    bzoj2732[HNOI2012]射箭
    poj1474 Video Surveillance
    bzoj3167[HEOI2013]SAO
    hdu2296 Ring
    bzoj2119 股市的预测
    bzoj2244[SDOI2011]拦截导弹
    bzoj3502[PA2012]Tanie Linie(最大k区间和)
    vijos1859[TJOI2014]电源插排
    比较SQL查询性能 语句
    什么是高内聚低耦合
  • 原文地址:https://www.cnblogs.com/dataadapter/p/2594645.html
Copyright © 2020-2023  润新知