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 ...
随机推荐
- 51nod乘积之和
题目链接 戳我 题意简述 你有长为\(n\)的序列和\(Q\)个询问,每次询问一个\(k\),求用\(k\)个数组成的不同方案的乘积的和. sol 显然要预处理一波. 考虑分治,左右两边都求出来后,怎 ...
- [UVALive 2678] Subsequence
图片加载可能有点慢,请跳过题面先看题解,谢谢 在切水题的道路上狂奔,一发不可收拾... 这道题好像不用写什么题解吧,吐个槽什么的算了 一眼题,大佬们都不屑于做,只有我这种弱菜才来写这种题目玩儿 记个前 ...
- BZOJ 4898 [APIO2017] 商旅 | SPFA判负环 分数规划
BZOJ 4898 [APIO2017] 商旅 | SPFA判负环 分数规划 更清真的题面链接:https://files.cnblogs.com/files/winmt/merchant%28zh_ ...
- Treat wchar_t as built-in type不一致导致的链接错误
今天用VS2013新建了一个工程,生成时出现很多怪异的链接错误,比如: error LNK2019: unresolved external symbol "__declspec(dllim ...
- 封装个StringBuffer,用array join的方式拼接字符串
(function(window) { var core_ArrPro = Array.prototype; var core_slice = core_ArrPro.slice; var core_ ...
- Nginx反向代理websocket配置实例
最近有一个需求,就是需要使用 nginx 反向代理 websocket,经过查找一番资料,目前已经测试通过,本文只做一个记录 复制代码 代码如下: 注: 看官方文档说 Nginx 在 1.3 以后的版 ...
- Git1:Git简介
目录 什么是版本控制系统 集中式版本控制系统 分布式版本控制系统 Git起源 Git特性 什么是版本控制系统 版本控制系统是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.版本控制 ...
- 2 Kafka Broker
Log的读写.删除流程---日志管理器(log manager)负责创建日志.获取日志.清理日志.所有的日志读写操作都交给具体的日志实例来完成. KafkaServer启动的时候,初始化三个类: Lo ...
- codevs 1540 1540 银河英雄传说
1540 银河英雄传说 题目描述 Description 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银 ...
- 【转】Ubuntu+apache绑定多个域名
1. 将 http://www.a.com 与 http://www.b.com 的DNS解析到你的服务器IP上. 2. 删除apache的默认主机配置文件.你也不希望创建2个虚拟主机后人家还能直接访 ...