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 ...
随机推荐
- Integer to Roman - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Integer to Roman - LeetCode 注意点 考虑输入为0的情况 解法 解法一:从大到小考虑1000,900,500,400,100,9 ...
- centos去下载mysql应该怎么选择linux版本
centos , 本质上和red hat 是一个公司的,差别不大. 你可以选择 red hat那个,或者选择 linux-generic这个,后者这个是通用的. 其实内部差别不大.2个任选一个都可.
- Android自定义 Dialog 对话框
Android自定义Dialoghttp://www.cnblogs.com/and_he/archive/2011/09/16/2178716.html Android使用自定义AlertDialo ...
- Codeforces Good Bye 2018
咕bye 2018,因为我这场又咕咕咕了 无谓地感慨一句:时间过得真快啊(有毒 A.New Year and the Christmas Ornament 分类讨论后等差数列求和 又在凑字数了 #in ...
- Python之旅:列表
Python列表脚本操作符 列表对 + 和 * 的操作符与字符串相似.+ 号用于组合列表,* 号用于重复列表. 如下所示: Python 表达式 结果 描述 len([1, 2, 3]) 3 长度 [ ...
- Kubernetes--kubectl
一.Kubectl命令行说明 类型 命令 描述 基础命令 create 通过文件名或标准输入创建资源 expose 将一个资源公开为一个新的kubernetes服务 run 创建并运行一个特定的镜 ...
- K8S Api Server认证
目录 认证类型 基于CA证书的双向认证 apiserver端配置 生成客户端私钥和证书 master核心组件与apiserver的认证方式 HTTP Token认证 HTTP Basic认证 kube ...
- Integer.parseInt不同jdk源码解析
执行以下代码: System.out.println(Integer.parseInt("-123")); System.out.println(Integer.parseInt( ...
- bzoj千题计划149:bzoj2527: [Poi2011]Meteors
http://www.lydsy.com/JudgeOnline/problem.php?id=2527 整体二分 区间加,单点查,树状数组维护差分序列 注意 累积可能会爆long long,所以一满 ...
- PHP 神盾解密工具
前两天分析了神盾的解密过程所用到的知识点,昨晚我把工具整理了下,顺便用神盾加密了.这都是昨天说好的,下面看下调用方法吧. 先下载 decryption.zip然后解压放到一个文件夹里,把你要解密的文件 ...