js点击页面其他地方如何隐藏div元素菜单
web页面常用的一个需求,写下拉菜单是我们往往不是用select_option,而是自定义一个元素列出选项来满足需求,当我们点击按钮出现菜单,
点击按钮或菜单以外页面空白地方隐藏该菜单,这里提供一种简单有效的方法仅供参考:
document.onclick = function(e) {
$("div").hide();
}
$('button').on("click", function(e) {
if($("#div").css("display") == "none") {
$("#div").show();
} else {
$("#div").hide();
}
e = e || event;
stopFunc(e);
});
$('#div').on("click", function(e) {
e = e || event;
stopFunc(e);
});
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
点击button出现div菜单,再次点击button隐藏菜单或点击div以外页面其他地方隐藏div菜单。
js点击页面其他地方如何隐藏div元素菜单的更多相关文章
- 实现点击页面其他地方,隐藏div(原生和VUE)
1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...
- 实现点击页面其他地方,隐藏div(vue)
方法一: 通过监听事件 document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ th ...
- jquery 点击页面其他地方实现隐藏菜单功能
1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...
- jquery实现点击页面其他地方隐藏指定元素
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- 点击页面其它地方隐藏该div的两种思路
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- 点击页面其它地方隐藏该div的方法
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...
- jQuery 实现点击页面其他地方隐藏菜单
点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...
随机推荐
- Swift使用SDWebImage处理远程图片资源
第一步:配置SDWebImage 打开github,https://github.com/rs/SDWebImage,将SDWebImage下载到本地 用Xcode创建一个swift的singleVi ...
- 读取Maven项目下resources目录下的配置文件(properties为例)
配置文件:xxxxx.properties a.url=******************** b.url=---------------------------------- 读取配置文件: im ...
- 【转】rt-thread的位图调度算法分析
序言 期待读者 本文期待读者有C语言编程基础,后文中要分析代码,对其中的一些C语言中的简单语句不会介绍,但是并不要求读者有过多的C基础,比如指针和链表等不会要求太多,后面在分析代码时,会附带地介绍相关 ...
- BZOJ1495 [NOI2006]网络收费 【树形dp + 状压dp】
题目链接 BZOJ1495 题解 观察表格,实际上就是分\(A\)多和\(B\)两种情况,分别对应每个点选\(A\)权值或者\(B\)权值,所以成对的权值可以分到每个点上 所以每个非叶节点实际对应一个 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- supervisor 添加新配置不生效的问题
supervisorctl reread supervisorctl reload (不运行这一步会导致启动不了) supervisorctl start xxx:* 提示:No config upd ...
- linux join命令
http://note.youdao.com/noteshare?id=151c4844cac74e9b08c5dc954a1a4967
- 实验四:终极改造之使用EF
回顾一下我们前面经过改造后的程序代码: (1)Listing.aspx:负责将Product对象集合(产品集合)按要求显示出来 (2)Repository.cs:负责读将数据库中读到的数据转换成Pro ...
- 网络优化之net.ipv4.tcp_tw_recycle参数
不要在linux上启用net.ipv4.tcp_tw_recycle参数 2015/07/27 CFC4N 本文为翻译英文BLOG<Coping with the TCP TIME-WAIT ...
- STL中的优先级队列priority_queue
priority_queue(queue类似)完全以底部容器为根据,再加上二叉堆(大根堆或者小根堆)的实现原理,所以其实现非常简单,缺省情况下priority_queue以vector作为底部容器.另 ...