点击按钮显示隐藏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> &lt ...
js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
js第一天点击按钮显示与隐藏
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title&gt ...
js实现输入密码之延迟星号和点击按钮显示或隐藏
缘由手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下.本文实现了两种密码展示代码实现 1 先明后密 js实现 ...
安卓TextView限定行数最大值，点击按钮显示所有内容
问题展示如上图所示,在普通的TextView中,要求: 最多显示3行超过三行显示展开按钮且点击展开按钮显示完整内容这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...
Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框
实现这三个功能的踩坑记录. 1. 需求在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方第一是双击显示编辑框. 第二是自动聚 ...

随机推荐

pip怎样用上豆瓣镜像
安装环境: windows 7 64位 python 3.4.2 64位(自带pip) 安装好后在环境变量上加上:C:\Python34;C:\Python34\Scripts; 说明: 网上说改写什 ...
向Spotify学习如何设计产品(转)
导语:Spotify是瑞典的精益创业项目,同时保持着很棒的产品交付记录.一般在产品上线之后,开发者才知道人们喜不喜欢它.Spotify如何解决这个问题? 本文转自 kent.zhu's Blog,原文 ...
TFS Build Error&colon; CSC &colon; fatal error CS0042&colon; Unexpected error creating debug information file &&num;39&semi;xxxx&period;PDB&&num;39&semi;
CSC : fatal error CS0042: Unexpected error creating debug information file 'xxxx.PDB' -- 'c:\Builds\ ...
POJ2031Building a Space Station (最小生成树之prim)
Problem Description You are a member of the space station engineering team, and are assigned a task ...
extjs 基础部分
创建对象的方法: 使用new 关键字创建对象. new classname ([config]) 使用Ext.create方法创建. Ext.create(classname,[config]) n ...
java中JSON转换
1.JSON介绍 JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度. JSON就是一串字符串只不过元素会使用特定的符 ...
DAO模式
什么是DAO模式: DAO(Data Access Object Pattern)用于将低层的数据操作API与上层的业务逻辑层分离,其主要涉及以下几个部分: 1.Data Access Object ...
利用SurfaceView显示正弦曲线，仿造示波器
众所周知,view是通过刷新来重绘视图的,Android系统通过发出VSYNC信号来进行屏幕重绘,刷新的时间间隔为16ms,如果在16ms内view完成你所需要的所有操作,那么用户在视觉上就不会产生卡 ...
gitlab webhook php exec 调用 shell 脚本。shell 脚本中调用 git pull 命令无法执行。
情况如下: 我在ubuntu server 14.04 上面安装了gitlab,来托管项目代码.然后想通过gitlab的web hook 功能来做测试服务器代码自动化更新代码功能.现在遇到一个问题:就 ...
深度学习RNN实现股票预测实战（附数据、代码）
背景知识最近再看一些量化交易相关的材料,偶然在网上看到了一个关于用RNN实现股票预测的文章,出于好奇心把文章中介绍的代码在本地跑了一遍,发现可以work.于是就花了两个晚上的时间学习了下代码,顺便把 ...