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="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
</div>

jquery点击其他地方隐藏div层的实现程序的更多相关文章

  1. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  2. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  3. 点击其他地方隐藏div

    document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...

  4. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  5. Jquery手机点击其他地方隐藏控件问题

    因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...

  6. 点击其它地方关闭DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  8. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  9. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

随机推荐

  1. [cocos2dx笔记004] android添加�静态库project

    (基于2.2.2版本号) 这步比較麻烦,不像vs2013那样好设置.參考了非常多文章.还是不能解决这个问题.仅仅有慢慢摸索了.在这里贴出来,希望能让大家能少走点弯路. 还是其于前面的文章提到的myli ...

  2. android135 360 来电去电归属地显示,自定义toast,

    点击会开启服务. sivAddress.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) ...

  3. jQuery 学习笔记(未完待续)

    一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById()函数        2.使 ...

  4. 实例源码--Android日历实例源码

      下载源码   技术要点: 1.Android基础控件的使用 2.Android应用开发基础框架 3.源码带有非常详细的中文 注释 ...... 详细介绍: 1. Android应用开 发技术 此套 ...

  5. Lipo Error!! can't open input file

    参考文章:http://stackoverflow.com/questions/17348912/lipo-error-cant-open-input-file I got it to Work, i ...

  6. css实现“固定表头带滚动条”的table

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. iOS之pch文件的正确使用

    在Xcode6之前,创建一个新工程xcode会在Supporting files文件夹下面自动创建一个“工程名-Prefix.pch”文件,也是一个头文件,pch头文件的内容能被项目中的其他所有源文件 ...

  8. About Webkit

    http://blog.csdn.net/spacetiller/article/details/5784461 一 . WebKit 简介 Webkit 是一个开放源代码的浏览器引擎 (web br ...

  9. Matlab中tic和toc用法

    简单地说,tic和toc是用来记录matlab命令执行的时间 tic用来保存当前时间,而后使用toc来记录程序完成时间. 两者往往结合使用,用法如下: tic operations toc 显示时间单 ...

  10. [MSDN] 使用 SharePoint 2013 中的 JavaScript 库代码完成基本操作

    MSDN:http://msdn.microsoft.com/zh-cn/library/jj163201.aspx 了解如何编写代码以在 SharePoint 2013 中使用 JavaScript ...