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元素菜单的更多相关文章

  1. 实现点击页面其他地方,隐藏div(原生和VUE)

    1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...

  2. 实现点击页面其他地方,隐藏div(vue)

    方法一: 通过监听事件 document.addEventListener('click',function(e){ if(e.target.className!='usermessage'){ th ...

  3. jquery 点击页面其他地方实现隐藏菜单功能

    1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...

  4. jquery实现点击页面其他地方隐藏指定元素

    代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...

  5. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  6. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  7. 点击页面其它地方隐藏该div的两种思路

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  8. 点击页面其它地方隐藏该div的方法

    思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而 ...

  9. jQuery 实现点击页面其他地方隐藏菜单

    点击页面其它地方隐藏id为messageList的div 代码: $('body').delegate("#message", 'click', function(e) { var ...

随机推荐

  1. Nginx web服务优化 (一)

    1.Nginx基本安全优化 a.更改配置文件参数隐藏版本 编辑nginx.conf配置文件增加参数,实现隐藏Nginx版本号的方式如下.在nginx配置文件nginx.conf中的http标签段内加入 ...

  2. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  3. 【bug】Could not find method compile() 解决

     集成第三方库出现 Error:Could not find method compile() for arguments [com.android.support:design:23.4.0] on ...

  4. STS导入Gradle项目出现 Could not create task of type 'DependencyManagementReportTask'

    解决方法: 在build.gradle文件下添加如下: classpath 'io.spring.gradle:dependency-management-plugin:0.6.1.RELEASE'

  5. BZOJ 1391 [Ceoi2008]order

    1391: [Ceoi2008]order Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完 ...

  6. BZOJ 1497 [NOI2006]最大获利

    1497: [NOI2006]最大获利 Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机遇,更是挑战.THU集团旗下的CS&T通讯公司在新一代通讯技术血战的前 ...

  7. 把矩阵分成n*m个块,从任意一个块出发,问是否可以一笔画遍历矩阵中所有的块

  8. C++调Python示例(转载)

    C++调Python,代码粘贴如下: #include <iostream> #include <Python.h> using namespace std; void Hel ...

  9. Java基础-字符串连接运算符String link operator

    Java基础-字符串连接运算符String link operator 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 字符串链接运算符是通过“+”进行拼接的. 一.使用“+”进行字 ...

  10. RGB色彩对照表

    RGB色彩对照表   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF00   #FFFAFA   #FFFAF0   #FFFACD   #FFF8DC   #FFF68F   ...