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.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
随机推荐
- WCF的ABC
首先: WCF的全称是Windows Communication Foundation,Windows通信基础的意思,是Microsoft为构建面向服务的应用程序而提供的统一编程模型,它整合.NET平 ...
- 定时自动同步文件,支持多文件夹同步,支持过滤文件和文件夹,解决FileSystemWatcher多次文件触发事件(源码)
博客园里面有很多同步工具和软件,关于FileSystemWatcher类解释的也很多,但收集了很多文章后,感觉没好的方法,自己没事写了一个定时文件同步,借鉴了很多博客园朋友的东西: 上主菜: 配置文件 ...
- java_jdbc_利用结果集元数据将查询结果封装为map_MetaData
package cn.itcast.batch; import java.sql.Connection; import java.sql.ParameterMetaData; import java. ...
- java 并发官方教程
http://docs.oracle.com/javase/tutorial/essential/concurrency/index.html Concurrency Computer users t ...
- Mysql在windows下的免安装配置步骤和重新安装的步骤
windows下mysql免安装配置 1. 下载mysql免安装压缩包 下载mysql-5.6.22-winx64.zip 解压到本地D:\mysql-5.6.22-winx64 2. 修改配置文件 ...
- 3D分析之Functional Surface工具箱(转)
来自:http://blog.csdn.net/kikitamoon/article/details/8195797 1. Add Surface Information(添加表面信息) 向点.线或面 ...
- HTML实现跳转到页面指定位置
<a href="#page1">跳转到页面1</a> <a href="#page2">跳转到页面2</a> ...
- CentOS 6.x安装gcc 4.8/4.9/5.2
1.gcc 4.8 cd /etc/yum.repos.d wget http://people.centos.org/tru/devtools-2/devtools-2.repo -gcc -bin ...
- [转]重新分配内置存储空间 android手机
本文转自:http://www.in189.com/thread-815721-1-1.html 鉴于有些同学遇到问题了,毕竟步骤繁琐,可能中间会出错,因此推荐用26L 338944 ...
- UVA - 213 Message Decoding (输入字符串并对单个字符进行操作的输入输出)
POINT: 关于表示一个编码:利用code字符数组表示一个编码字符,其中code[len][val]表示长度为len,二进制值为val的字符: 主程序如下: #include <iostrea ...