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 ...
随机推荐
- BZOJ 2720: [Violet 5]列队春游
2720: [Violet 5]列队春游 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 189 Solved: 133[Submit][Status] ...
- 【SDOI2015】序列统计 解题报告
2119: [BZOJ3992][SDOI2015]序列统计 Description 小\(C\)有一个集合\(S\),里面的元素都是小于\(M\)的非负整数. 他用程序编写了一个数列生成器,可以生成 ...
- 不同tab下的列表长度不同,tab的样式和底部的位置不同
要求:当点击不同的tab时,被点击的tab样式不同,产生不同的列表.当列表长度大于屏幕高度时,底部随列表显示:当列表长度小于屏幕高度时,底部固定在屏幕的底部. demo: <!DOCTYPE h ...
- 适用于vue项目的打印插件
此方法只适用于现代浏览器,IE10以下就别用了 // 使用时请尽量在nickTick中调用此方法 //打印 export default (refs, cb) => { let cloneN i ...
- Rigidbody和Collider
Rigidbody: 常用属性: Mass:默认为1,单位并不是g或kg,而是相对的质量计量单位,只决定物体的惯性: Drag:空气阻力: Angular Drag:角阻力,旋转时受的阻力: Use ...
- Cloudstack系统配置(三)
系统配置 CloudStack提供一个基于web的UI,管理员和终端用户能够使用这个界面.用户界面版本依赖于登陆时使用的凭证不同而不同.用户界面是适用于大多数流行的浏览器包括IE7,IE8,IE9,F ...
- 转:RAC中比较replay, replayLast, and replayLazily
A co-worker recently asked me about the difference between -replay, -replayLast, and -replayLazily i ...
- webapi框架搭建-安全机制(二)-身份验证
webapi框架搭建系列博客 身份验证(authentication)的责任是识别出http请求者的身份,除此之外尽量不要管其它的事.webapi的authentication我用authentica ...
- 跨域问题 Uncaught DOMException: Blocked a frame with origin。。。
第三方系统内嵌 到iframe中的 跨域问题. 解决方案: http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
- 贪心问题 POJ 2393 Yogurt factory
题目:http://poj.org/problem?id=2393 题意:N周,每周生成牛奶(任意!),每周成本为c_i(1~5000),每周出货 y_i:出货可以使用该周生产的,也可以用之前的储存的 ...