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. Swift使用SDWebImage处理远程图片资源

    第一步:配置SDWebImage 打开github,https://github.com/rs/SDWebImage,将SDWebImage下载到本地 用Xcode创建一个swift的singleVi ...

  2. CentOS7搭建elasticsearch集群

    准备三个节点,系统版本为CentOS7.3. 11.0.10.18 es01 11.0.10.19 es02 11.0.10.20 es03 1.安装java环境 # yum install -y j ...

  3. 响应式开发(三)-----Bootstrap框架的安装使用

    下载 Bootstrap 可以从http://getbootstrap.com/上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您 ...

  4. Java中的三目运算符可能出现的问题

    你真的了解Java中的三目运算符吗? 原创 2018-04-27 刨根问底的 Hollis Hollis Hollis 微信号 hollischuang 功能介绍 一个对Coding有着独特追求的人. ...

  5. [USACO10OPEN]牛跳房子Cow Hopscotch

    题目描述 奶牛们正在回味童年,玩一个类似跳格子的游戏,在这个游戏里,奶 牛们在草地上画了一行N个格子,(3 <=N <= 250,000),编号为1..N. 就像任何一个好游戏一样,这样的 ...

  6. (转)maven镜像详解

    背景:一直以来,对maven镜像不是特别的了解,这里通过对网上资料的收集,做个详细的记录. 镜像介绍 如果仓库X可以提供仓库Y存储的所有内容,那么就可以认为X是Y的一个镜像.换句话说,任何一个可以从仓 ...

  7. Centos7.2安装tomcat+Myeclipse(遇到的一些问题与总结)+web项目实战

    工作环境:centos7.2 PS:没有耐心的同学可以直接跳到后面的安装方法,对于安装方法大多是网上的,我只是做相关收集和总结 给个tomca和Myeclipset折腾的半死,现在做一些总结1.一定要 ...

  8. Linux系统之路Centos7.2——安装QQ 的一些问题(附VMware的安装)

    1.首先安装wine 可以通过源码安装,注意在编译的时候加参数,编译64位(如果你的系统是64位哦!) 但是我建议直接rpm安装. 安装网络源: rpm -ivh epel-release-6-8.n ...

  9. Docker Swarm高可用性

    一.前言 在Docker Swarm集群中,Swarm manager负责管理整个集群,如果管理节点manager出现故障,虽然不会影响现有的服务和工作节点,但是我们不能继续管理我们的docker s ...

  10. HAproxy Json日志格式配置

    通过日志工作分析日志时,非json日志分析起来比较麻烦.通过以下的配置,可以让生成的日志为json. log-format {"haproxy_clientIP":"%c ...