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.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
随机推荐
- JavaScript标准Selection操作
简介 术语 属性 方法 document.activeElement document.designMode = 'on'; 简介 selection是对当前激活选中区(即高亮文本)进行操作. 在非I ...
- cocos2dx 公告效果
第一种方法: http://blog.csdn.net/jackystudio/article/details/12991977 [玩转cocos2d-x之十六]滚动字幕和公告 第二种方法: http ...
- android studio的里的 content_XXX_xml问题
遇到这个问题就是androidStudio的版本问题,androidStudio会出现这个问题是在androidStudio1.4以上版本当遇到这个问题的时候建Activity的时候选择EmptyAc ...
- CentOS7 发布 ASP.NET MVC 4 --- mono 4.6.0 + jexus 5.8.1
yum -y install gcc gcc-c++ yum -y install bison pkgconfig glib2-devel gettext make libpng-devel libj ...
- 记一次大量 TCP 连接失败
背景 在一段没有日志的历史遗留代码上面加入监控部署后不久,就收到了服务调用成功率低的告警,真是哗了狗了 解决过程 client端在线上单机部署,根据监控上面的返回码比例看出失败原因都是链接失败,通过 ...
- url解析
window.onload=function(){ var url="http://www.qq.com/index.html?key1=1&key2=2&key3=3&qu ...
- PHP自动执行程序
/****config.php***/ <?php return 1; //需要停止时改成0 ?> /******************/ ignore_user_abort();//关 ...
- 【译文】NginScript – 为什么我们要实现自己的JS引擎?
在上周的nginx.conf 2015用户大会上,我们发布了全新的JavaScript引擎nginscript的预览版.历史上,JavaScript语言已经应用在许多方面,首先是作为客户端脚本,然后又 ...
- dagger和butterknife使用冲突
两者会冲突的主要原因是因为两者都有:javax.annotation.processing.Processor 于是在build.gradle中添加如下配置即可: // 注释冲突 packagingO ...
- Swf Decrypt详解
http://www.2cto.com/Article/201507/414477.html 攻击在持续,攻击的技术在演进.防御者需要持续的跟进研究和投入.最近Flash 0day频繁出现,将我们更多 ...