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. BZOJ2276 [Poi2011]Temperature 【单调队列】

    题目链接 BZOJ2276 题解 一开始看错题,以为求的是可以不连续的,想出一个奇怪的线段树,发现空间根本开不下?? 题目要我们求连续的最长可能不下降区间 对于区间\([l,r]\)如果合法,当且仅当 ...

  2. go语言切片作为函数参数的研究

    slice作为函数参数是值传递 golang中的切片slice底层通过数组实现,slice类似一个结构体,其中一个字段保存的是底层数组的地址,还有长度(len) 和 容量(cap)两个字段. 结构体作 ...

  3. laravel 中的 toSql 获取带参数的 sql 语句

    默认情况下,toSql 获取到的 sql 里面的参数使用 "?" 代替的,如下: DB::table('user')->where('id', 1)->toSql(); ...

  4. Kubernetes PV/PVC使用实践

    转载于https://www.cnblogs.com/ericnie/p/7733281.html   pv,pvc的概念不解释了,之前在registry中已经使用过PV和PVC,现在想把WebLog ...

  5. ubuntu 安装node.js

  6. GeoDa计算全局Moran‘I

    GeoDa计算全局Moran‘I 1.导入包含数据的.shp文件 2.创建权重矩阵,点击Weight Manger,再点击Create, weights file ID variable(其中包含的数 ...

  7. GO_02:GO语言开篇

    Go的发展史 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发,后 ...

  8. Shell记录-Shell命令(磁盘)

    inux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式 df [选项] [文件] Shell ...

  9. 将输出语句打印至tomcat日志文件中

    tomcat-9.0.0 将程序中            System.out.println("------------这是输出语句System.out.println()-------- ...

  10. servlet程序使用tomcat启动报错

    根据书上的需求写了一些简单的servlet代码,启动时报错: 严重: A child container failed during startjava.util.concurrent.Executi ...