zoukankan      html  css  js  c++  java
  • jquery点击其他地方隐藏div层的实现程序

    js代码

    $(document).ready(function() { 
    //语言头部的点击事件,显示语言列表 
    $(".language_selected").click(function(e) { 
    $(".language_list").toggle(); 
    e.stopPropagation(); //阻止事件冒泡,否则事件会冒泡到下面的文档点击事件 
    }); 
    //点击文档时,隐藏语言列表 
    $(document).click(function() { 
    $(".language_list").hide(); 
    }); 
    //点击语言列表中的语言项时,更新选中项,并隐藏语言列表 
    $(".language_list li").click(function() { 
    $(".language_selected").text($(this).text()); 
    $(".language_list").hide(); 
    }); 
    $("#noPopEvent").click(function(e) { 
    e.stopPropagation(); 
    }); 
    });

    css代码

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

    html代码

    <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 
    </div>
  • 相关阅读:
    Navicat
    Eclipse 代码质量管理插件
    oracle sql 逻辑处理
    view视图 | 索引
    LIKE模糊查询
    启动tomcat报找不到或无法加载主类
    oracle:decode
    oracle:case when then else end
    ssh 公共秘钥
    ip 和数字之间的转换
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/4565573.html
Copyright © 2011-2022 走看看