点击按钮显示隐藏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节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
随机推荐
- deepin 环境变量配置加载顺序
加载顺序,默认是没有 .bash_profile 文件 1. non-login 方式 ~$ su deepin run /ect/bash.bashrc run .bashrc 2.login 方式 ...
- js限制日期选择范围是两个月
$(".dateInputClass input:eq(0)").bind("click", function(){WdatePicker({dateFmt:' ...
- HDU1284--完全背包
钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- Echarts后台封装option对象
该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(this.dateNum == null || this.dateNum.equ ...
- Linux服务器制定mysql数据库备份的计划任务
首先,创建一个shell脚本: Shell #!/bin/bash mysql_pwd="1234567890" mysql_dump="/usr/local/mysql ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- Mysql服务器SQL模式 （官方精译）
MySQL服务器可以在不同的SQL模式下运行,并且可以根据sql_mode系统变量的值对不同的客户端应用不同的模式.DBA可以设置全局SQL模式以匹配站点服务器操作需求,并且每个应用程序可以将其会话S ...
- 关于C++编译链接和模板函数
一,关于编译链接编译指的的把编译单元生成目标文件的过程链接是把目标文件链接到一起的过程编译单元:可以认为是一个.c或者.cpp文件.每个编译单元经过预处理会得到一个临时的编译单元.预处理会间接包含其他 ...
- 刚从it培训班出来的学生如何走向工作岗位
大家好,这是我本人在博客园的第一篇博文. 相信很多人都是从 it 培训班学习然后加入到程序员这个大家族,或多或少,有些人会和博主有一样的感受,所以此篇博文我们不讨论技术,博主也是刚从培训班坑里跳出来正 ...
- NIO相关基础篇三
转载请注明原创出处,谢谢! 说在前面 上篇NIO相关基础篇二,主要介绍了文件锁.以及比较关键的Selector,本篇继续NIO相关话题内容,主要谈谈一些Linux 网络 I/O模型.零拷贝等一些内容, ...