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 ...
 
随机推荐
- 【bzoj3730】 震波
			
http://www.lydsy.com/JudgeOnline/problem.php?id=3730 (题目链接) 题意 给出一棵树,每个节点又一个权值.两个操作,询问距离节点${x}$不超过${ ...
 - 【spoj SUBST1】 New Distinct Substrings
			
http://www.spoj.com/problems/SUBST1/ (题目链接) 题意 求字符串的不相同的子串个数 Solution 后缀数组论文题. 每个子串一定是某个后缀的前缀,那么原问题等 ...
 - 设计模式 (一)——策略模式(Strategy,行为型)
			
1.概述 使用设计模式可以提高代码的可复用性.可扩充性和可维护性.策略模式(Strategy Pattern)属于行为型模式,其做法是将类所需的行为或者算法一个个封装成单独的类,并将其作为类的数据成员 ...
 - bzoj 3611: [Heoi2014]大工程  && bzoj 2286: [Sdoi2011消耗战
			
放波建虚树的模板. 大概是用一个栈维护根节点到当前关键点的一条链,把其他深度大于lca的都弹出去. 每次做完记得复原. 还有sort的时候一定要加cmp!!! bzoj 3611 #include&l ...
 - 《剑指offer》— JavaScript(20)包含min函数的栈
			
包含min函数的栈 题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数. 实现代码 var stack = []; function push(node) { stack. ...
 - c++ 顶层const与底层const
			
底层const是代表对象本身是一个常量(不可改变): 顶层const是代表指针的值是一个常量,而指针的值(即对象的地址)的内容可以改变(指向的不可改变): #include <iost ...
 - NSLineBreakByWordWrapping和NSLineBreakByCharWrapping
			
在iOS开发过程中,在文本的lineBreakMode中有以下几个功能: NSLineBreakByWordWrapping = 0 //以空格为界,保留整个单词. NSLineBreakByChar ...
 - 数据结构编程实验——chapter9-应用二叉树的基本概念编程
			
二叉树是树结构中的重要概念,一些特殊的二叉树如满二叉树和完全二叉树由于节点序号的特殊关系,在一些算法中十分常见. 这篇文章将从三个方面介绍有关二叉树的知识点: (1) 普通有序树转化为二叉树. ( ...
 - psutil-3.4.2才是我的老系统(Windows XP)的菜
			
psutil-3.4.2才是我的老系统(Windows XP)的菜 psutil 是一款跨平台的查看操作系统和进程信息的工具. 在一次卸载和重装了spyder包之后, spyder升级到了: 2.3. ...
 - MongoDB 及 Mysql 背后的 B/B+树
			
索引是数据库常见的数据结构,每个后台开发人员都应该对索引背后的数据结构有所了解. 本文通过分析B-Tree及B-/+Tree数据结构及索引性能分析及磁盘存取原理尝试着回答一下问题: 为什么B-Tree ...