点击按钮显示隐藏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节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
随机推荐
- 浅谈使用git进行版本控制
小编在学习可视化的时候,接触到git,所以这里写一下关于GitHub的有关知识,写这个的目的还是巩固自己的学习,一方面可以提高自己,另一方面回头看一下,有什么更深层次的东西还可以再记录. 首先说一下版 ...
- js作用域与执行环境（前端基础系列）
一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...
- Taffy Web开发，Python Flask实践详解
1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...
- flask-login使用笔记
看外国文献的中文翻译 翻译的程度有的让人会疯,翻译最好的状态是异译 直译会显的很生硬 看起来确实难过:所以在看的时候,建议都看外国文献吧,或者自己用谷歌翻译,感觉比一些翻译的博客准多了: 在使用fl ...
- Cs Round#56 D Find Path Union
题意:有一棵如下的完全二叉树,求所有给定结点到根节点的路径的并有多少条边. 一开始联想到线段树,发现结点的排布很像线段树的标号.于是模仿线段树敲了一下,交上去发现3个点MLE了... 无心优化,跑去看 ...
- 【luogu P1186】玛丽卡
https://www.luogu.org/problem/show?pid=1186 考虑暴力,枚举图上每一条边删去后跑Dijkstra,取M次的最大值. 仔细想想就会发现删除最短路以外的边对最短路 ...
- 【NOIP2009提高组】最优贸易
https://www.luogu.org/problem/show?pid=1073 如果他想在i点卖出,那么就要在从1点出发到i点的路径里找个最便宜的买入,用Bellman-Ford求出这样最便宜 ...
- linux0.11学习笔记（1）
公布软件包包括内容: bootimage.Z - 具有美国键盘代码的压缩启动映像文件: rootimage.Z - 以1200kB 压缩的根文件系统映像文件: linux-0.11.tar.Z- 内核 ...
- mysql本地訪问linuxserver，出现SQLSTATE[HY000] [1130] Host '127.0.0.1' is not allowed to connect to this
解决方式:网上看了说.更改mysql库的user表,加入一条host为%的数据就能够.可是还是不行. 后来,直接登录mysql.给訪问加权限就能够了. 运行 [root@iZ25p77kem7Z ~] ...
- 【Jsp】JSP自己定义标签与MODEL1、MODEL2标准
在JSP2.0之后支持自己定义标签,如今一般都是jsp2.4的版本号了,所以无须考虑版本号的问题. 直接使用就能够了.尽管一般开发的过程中,非常少会自己定义JSP标签.可是通过一个JSP自己定义标签的 ...