点击按钮显示隐藏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的更多相关文章

  1. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  2. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  3. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  4. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  5. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  6. js第一天 点击按钮显示与隐藏

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  7. js实现输入密码之延迟星号和点击按钮显示或隐藏

    缘由 手机打开segmentfalut时,长时间不登陆了,提示要重新登陆,输入的过程中看到输入密码时,延迟后再变成密文,很好奇,所以捣鼓了一下.本文实现了两种密码展示 代码实现 1 先明后密 js实现 ...

  8. 安卓TextView限定行数最大值，点击按钮显示所有内容

    问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...

  9. Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

    实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚 ...

随机推荐

  1. noip考前模板大整理

    //归并排序求逆序对 #include<bits/stdc++.h> #define ll long long using namespace std; ]; ll ans; ]; voi ...

  2. [转]git问题ERROR: Repository not found.的解决

    原文地址:http://blog.csdn.net/u010154424/article/details/51233966 在github中新增了一个项目,按照git的提示添加了远程仓库,但是提交的时 ...

  3. 采用Opserver来监控你的ASP.NET项目系列(一、Opserver监控的简介与平台搭建)

    前言 之前有过2篇关于如何监控ASP.NET core项目的文章,有兴趣的也可以看看. 今天我们主要来讲讲如何监控我们的ASP.NET项目. 首先我们来介绍一下,什么是Opserver,它是Stack ...

  4. BigDecimal工具类处理精度计算

    /** * Created by My_coder on 2017-07-27. * 加减乘除计算工具类 */ public class BigDecimalUtil { private BigDec ...

  5. NGUI_Atlas

    二.NGUI的图集制作: 1.概述: 将导入的图片资源全部制成一张图集,可以节约资源,当制成图集后,就可以将导入的图片资源进行删除, 再后续的操作直接使用图集中的图片即可,NGUI自带的Atlas M ...

  6. 大白话Vue源码系列(02)：编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  7. MySQL系列：高可用架构之MHA

    前言 从11年毕业到现在,工作也好些年头,入坑mysql也有近四年的时间,也捣鼓过像mongodb.redis.cassandra.neo4j等Nosql数据库.其实一直想写博客分享下工作上的零零碎碎 ...

  8. Android-Dalvik指令集

    转载请标明出处:http://blog.csdn.net/goldenfish1919/article/details/40821777 原文:http://pallergabor.uw.hu/and ...

  9. python文件和文件夹訪问File and Directory Access

    http://blog.csdn.net/pipisorry/article/details/47907589 os.path - Common pathname manipulations 都是和路 ...

  10. centos yum安装ffmpeg

    ffmpeg是一个重要的应用软件,用于执行与视频文件转换成不同的视频流格式的视频站点,能够安装在linux系统上来使用 (一)安装编译环境  #yum install -y automake auto ...