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="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层的实现程序的更多相关文章
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- 点击其他地方隐藏div
document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- Jquery手机点击其他地方隐藏控件问题
因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...
- 点击其它地方关闭DIV
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
随机推荐
- IOS - 常用宏定义和功能方法
可能不定期添加新的东西 github地址:https://github.com/yuqingzhude/CommonUseDemo /************************Tools**** ...
- 【面试题】如何让C语言自动发现泄漏的内存
1. 题目 改造malloc和free函数,使C语言能自动发现泄漏的内存,在程序退出时打印中遗漏的内存地址和大小. 2. 思路 用一个链表来记录已经分配的内存地址.在malloc时,把分配的内存地址和 ...
- linux 命令学习日记 20160621
1.cat /proc/meminfo 观察Linux系统上虚拟内存的当前状态 2.ipcs -m ipcs命令专门用来查看系统上的当前共享内存页面 3.ls /dev -al sda* ttyS* ...
- web service 部署
写的不好,全当是写给自己看的吧. 公司用飞天诚信的加密狗对网站进行加密,我要部署加密狗的web service.注:web service 由加密狗公司提供. 1.新建网站dog
- 高灵活低耦合Adapter快速开发攻略
Android开发中经常需要使用Adapter. 传统方法是自定义一个Adapter并继承AndroidSDK内的BaseAdapter, 这种方式代码量大,耦合度高,灵活性差(各种监听事件需要对Vi ...
- Sqlserver的触发器的简单使用
1,触发器有两种 (1)After触发器(之后触发) 触发器有个好处:就是你之前有过什么操作他会将你的操作的数据信息完整的保存下来,比如你删过什么信息,如果用触发器,那么删除后就会显示两行受影响,那么 ...
- rownum与rowId
一.RowNum Rownum是oracle生成结果集时得到的一个伪列, 按照读出行的顺序, 第一条rownum=1, 第二条=2. 对于 Oracle 的 rownum 问题,很多资料都说不支持 ...
- 线程本地变量ThreadLocal
一.本地线程变量使用场景 并发应用的一个关键地方就是共享数据.如果你创建一个类对象,实现Runnable接口,然后多个Thread对象使用同样的Runnable对象,全部的线程都共享同样的属性.这意味 ...
- mongodb用mongoose取到的对象不能增加属性
先定义了一个article的schema var mongoose = require('mongoose'); var Schema = mongoose.Schema; exports.schem ...
- JSON对象和string的相互转换
JSON.stringify(obj) 将JSON转为字符串. JSON.parse(string) 将字符串转为JSON格式.