点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
注意：此方法对touch事件不行，因为stopPropagation并不能阻止touchend的冒泡
<style type="text/css">
body
{
background-color:#999999;
} #myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
}
</style>
<body>
<input id="btn" type="button" value="显示DIV" /> <div id="myDiv">
This is a div;
</div>
<script type="text/javascript">
var myDiv = $("#myDiv");
$(function (){
$("#btn").click(function (event){
if($(myDiv).is(":hidden")){
showDiv();//调用显示DIV方法
$(document).on("click", function () {//对document绑定一个影藏Div方法
$(myDiv).hide();
});
event.stopPropagation();//阻止事件向上冒泡
}else{
$(myDiv).hide();
} }); $(myDiv).click(function (event)
{
event.stopPropagation();//阻止事件向上冒泡
});
});
function showDiv(){
$(myDiv).slideDown("300");
}
</script>
</body>
点击按钮显示隐藏DIV，点击DIV外面隐藏DIV的更多相关文章
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- js第一天 点击按钮显示与隐藏
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- js实现输入密码之延迟星号和点击按钮显示或隐藏
缘由 手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下.本文实现了两种密码展示 代码实现 1 先明后密 js实现 ...
- 安卓TextView限定行数最大值，点击按钮显示所有内容
问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...
- Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
随机推荐
- 51Nod--1011最大公约数GCD
1011 最大公约数GCD 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 输入2个正整数A,B,求A与B的最大公约数. Input 2个数A,B,中间用 ...
- SEO中TDK写法的意思以及注意事项
在SEO中,所谓的TDK其实就是title.description.keywords这三个标签,这三个标签在网站的优化过程中,至关重要所以今天童童来和大家分享下,如何去写好TDK标签! 1.title ...
- 关于VS2017，VS2015 中利用 EF使用Mysql 不显示数据源问题解决方案
在win7,win10,vs2015,vs2017之间折腾了两天,死活就是调不出来Mysql数据源.真是活见鬼了. 直接说方案吧. 一,卸载你所安装过的mysql-connector-net.mysq ...
- Koltin——最详细的可见性修饰符详解
在Kotlin中,不管是类,对象,接口,构造函数,函数,属性及其设置器都具有可见性修饰符.Kotlin中的可见性修饰符共四种.即public.protected.private.internal.在不 ...
- Postgresql中的explain
PostgreSQL为每个收到的查询设计一个查询规划.选择正确的匹配查询结构和数据属性的规划对执行效率是至关重要要的,所以系统包含一个复杂的规划器来试图选择好的规划.你可以使用EXPLAIN命令查看查 ...
- vue-cli 使用小技巧
1.关闭烦人的eslint 语法检测,在 config 文件夹下 设置: // Use Eslint Loader? // If true, your code will be linted duri ...
- Linux Rsync备份服务介绍及部署守护进程模式
rsync介绍 rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份工具 在常驻模式(daemon mode)下,rsync默认监听TCP端口873,以原生rsync传输 ...
- form表单提交和ajax提交优先级
form中若定义action,那么,ajax将不能执行.form默认提交的请求优先级高于ajax
- mouseenter和mouseover的区别
mouseover事件-不论鼠标指针穿过被选元素或其子元素,都会触发. mouseenter事件-只有在鼠标指针穿过被选元素时才会触发,对应事件为mouseleave. mouseout事件-不论鼠标 ...
- Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...