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. Docker Machine 和 Docker Engine 的区别

    Docker Engine 当人们提到 Docker,一般而言,大家说的是 Docker Engine,如下图:  它是一个 client-server application. Docker Eng ...

  2. HDU 1686 Oulipo / POJ 3461 Oulipo / SCU 2652 Oulipo (字符串匹配,KMP)

    HDU 1686 Oulipo / POJ 3461 Oulipo / SCU 2652 Oulipo (字符串匹配,KMP) Description The French author George ...

  3. 1044 Shopping in Mars

    Shopping in Mars is quite a different experience. The Mars people pay by chained diamonds. Each diam ...

  4. 【Asp.net入门5-02】创建数据模型和存储库

  5. 重启电脑后,redis 6380端口关闭重启

    zb@zb-computer:/usr/local/redis/etc$ /usr/local/redis/bin/redis-server redis.6380.conf &[1] 3062 ...

  6. 安装ucenter discuzX

    需要先安装ucenter再安装discuzX!! ucenter下载,官网上不大好下载: http://www.comsenz.com/downloads/install/ucenter 下载不了; ...

  7. Docker入门与应用系列(二)镜像管理

    1.1 什么是镜像 简单说,Docker镜像是一个不包含Linux内核而又精简的Linux操作系统. 1.2 镜像从哪里来 Docker Hub是由Docker公司负责维护的公共注册中心,包含大量的容 ...

  8. koa中间件机制

    Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架. koa2利用的是async/await,洋葱圈模型. 1. koa2中间件基本用法

  9. windows10安装ipython jupyter

    环境: windows 10 x64 python2.7(已经安装好numpy scipy matplotlib) 过程: 首先安装visual c++ 9.0环境,去http://aka.ms/vc ...

  10. openGL笔记-画基本图形

    #include "iostream" #include <GL/glut.h> #include<cmath> #include<vector> ...