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. Integer to Roman - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Integer to Roman - LeetCode 注意点 考虑输入为0的情况 解法 解法一:从大到小考虑1000,900,500,400,100,9 ...

  2. centos去下载mysql应该怎么选择linux版本

    centos , 本质上和red hat 是一个公司的,差别不大. 你可以选择 red hat那个,或者选择 linux-generic这个,后者这个是通用的. 其实内部差别不大.2个任选一个都可.

  3. Android自定义 Dialog 对话框

    Android自定义Dialoghttp://www.cnblogs.com/and_he/archive/2011/09/16/2178716.html Android使用自定义AlertDialo ...

  4. Codeforces Good Bye 2018

    咕bye 2018,因为我这场又咕咕咕了 无谓地感慨一句:时间过得真快啊(有毒 A.New Year and the Christmas Ornament 分类讨论后等差数列求和 又在凑字数了 #in ...

  5. Python之旅:列表

    Python列表脚本操作符 列表对 + 和 * 的操作符与字符串相似.+ 号用于组合列表,* 号用于重复列表. 如下所示: Python 表达式 结果 描述 len([1, 2, 3]) 3 长度 [ ...

  6. Kubernetes--kubectl

    一.Kubectl命令行说明 类型 命令 描述 基础命令 create  通过文件名或标准输入创建资源 expose  将一个资源公开为一个新的kubernetes服务 run 创建并运行一个特定的镜 ...

  7. K8S Api Server认证

    目录 认证类型 基于CA证书的双向认证 apiserver端配置 生成客户端私钥和证书 master核心组件与apiserver的认证方式 HTTP Token认证 HTTP Basic认证 kube ...

  8. Integer.parseInt不同jdk源码解析

    执行以下代码: System.out.println(Integer.parseInt("-123")); System.out.println(Integer.parseInt( ...

  9. bzoj千题计划149:bzoj2527: [Poi2011]Meteors

    http://www.lydsy.com/JudgeOnline/problem.php?id=2527 整体二分 区间加,单点查,树状数组维护差分序列 注意 累积可能会爆long long,所以一满 ...

  10. PHP 神盾解密工具

    前两天分析了神盾的解密过程所用到的知识点,昨晚我把工具整理了下,顺便用神盾加密了.这都是昨天说好的,下面看下调用方法吧. 先下载 decryption.zip然后解压放到一个文件夹里,把你要解密的文件 ...