点击按钮显示隐藏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节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...
随机推荐
- 欢迎大家关注我的微信公众号（nangongkuo）
欢迎大家关注我的微信公众号,在这个公众号里面我会给大家分享我学习过程中分享给大家的一些技术性的东西,和一些生活经验的总结分享.
- 自己实现String.prototype.trim方法
今天呢 知乎看到一道题 说是网易面试题,要求自己写一个trim()方法, 实现 var str = " a sd "; 去掉字符串两端的空格. 直接上码 var str ...
- git上传本地文件到gitlab
The repository for this project is empty If you already have files you can push them using command l ...
- 修改 docker image 安装目录 (解决加载大image时报错："no space left on device")
修改 docker image 安装目录 (解决加载大image时报错:"no space left on device" ) 基于Ubuntu16.04 docker版本: 17 ...
- Java内存管理（一）
好久没有写博客了,深感羞愧,今天聊一下Java的内存管理 简单介绍 Java相比传统语言(C,C++)的一个优势在于其能够自己主动管理内存.从而将开发人员管理内存任务剥离开来. 本文大体描写叙述了J2 ...
- Android音频: 怎样使用AudioTrack播放一个WAV格式文件?
翻译 By Long Luo 原文链接:Android Audio: Play a WAV file on an AudioTrack 译者注: 1. 因为这是技术文章,所以有些词句使用原文,表达更准 ...
- kafka入门样例 for java
1,生产者 import java.util.Properties; import kafka.javaapi.producer.Producer; import kafka.producer.Key ...
- Maste Note for OCR / Vote disk Maintenance Operations (ADD/REMOVE/REPLACE/MOVE)
Doc ID 428681.1 Applies to: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 11.2.0.1.0 [R ...
- 在Intellij里使用Erlang依赖库
这里以protobuffs为例,记录一下环境的配置,发现这种东西中文的资料真的不多,无论是分享还是记录都是很好的 1.创建一个文件夹名use_proto, 配置rebar.config文件如下: {d ...
- 原来你是这样的JAVA[01]-基础一瞥
1.Java是什么呢? Java不仅是一门语言,而且是一个完整的平台,有一个庞大的库,其中包含了很多可重用的代码和一个提供安全性.跨操作系统的可移植性以及自动垃圾收集等服务的执行环境. 2.JDK 和 ...