点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

注意：此方法对touch事件不行，因为stopPropagation并不能阻止touchend的冒泡

  1. <style type="text/css">
  2.         body
  3.         {
  4.         background-color:#999999;
  5.         }
  6.  
  7.         #myDiv
  8.         {
  9.         background-color:#FFFFFF;
  10.         width:250px;
  11.         height:250px;
  12.         display:none;
  13. 　　　　　　}
  14. </style>
  15. <body>
  16. <input id="btn" type="button" value="显示DIV" />
  17.  
  18. <div id="myDiv">
  19. This is a div;
  20. </div>
  21. <script type="text/javascript">
  22. 　　　　var myDiv = $("#myDiv");
  23.         $(function (){
  24.                 $("#btn").click(function (event){
  25.                     if($(myDiv).is(":hidden")){
  26.                         showDiv();//调用显示DIV方法
  27.                         $(document).on("click", function () {//对document绑定一个影藏Div方法
  28.                             $(myDiv).hide();
  29.                         });
  30.                         event.stopPropagation();//阻止事件向上冒泡
  31.                     }else{
  32.                         $(myDiv).hide();
  33.                     }
  34.  
  35.                 });
  36.  
  37.                 $(myDiv).click(function (event)
  38.                 {
  39.                     event.stopPropagation();//阻止事件向上冒泡
  40.                 });
  41.             });
  42.         function showDiv(){
  43.             $(myDiv).slideDown("300");
  44.         }
  45. </script>
  46. </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. CCF-201312-3-最大的矩形

    问题描述 试题编号: 201312-3 试题名称: 最大的矩形 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ ...

  2. 组件嵌套时报：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...

  3. ibv_open_device()函数

    struct ibv_context *ibv_open_device(struct ibv_device *device); 描述 函数会创建一个RDMA设备相关的context:可以通过ibv_c ...

  4. 使用hiredis实现pipeline方式访问

    1.介绍 hiredis: 一个c/c++的访问redis的api库 地址:https://github.com/redis/hiredis pipeline方式: redis中的pipeline方式 ...

  5. 深入浅出了解OCR识别票据原理

    欢迎大家前往云加社区,获取更多腾讯海量技术实践干货哦~ 译者:Mr.Geek 本文翻译自dzone 中Ivan Ozhiganov所发文章Deep Dive Into OCR for Receipt ...

  6. 机器学习笔记1 - Hello World In Machine Learning

    前言 Alpha Go在16年以4:1的战绩打败了李世石,17年又以3:0的战绩战胜了中国围棋天才柯洁,这真是科技界振奋人心的进步.伴随着媒体的大量宣传,此事变成了妇孺皆知的大事件.大家又开始激烈的讨 ...

  7. BST性能分析&改进思路——平衡与等价

    极端退化 前面所提到的二叉搜索树,已经为我们对数据集进行高效的静态和动态操作打开了一扇新的大门.正如我们所看到的,BST从策略上可以看作是将之前的向量(动态数组)和链表结构的优势结合起来,不过多少令我 ...

  8. 命令行保存指定目录文件的名字（可包含文件夹文字）到txt文本文件

    Microsoft Visual Studio中配置OpenCV解决方案属性的时候, 需要将OpenCV的lib扩展名的库文件添加到属性的依赖列表里面,网上的有些人博客里面直接给出的会有问题(但大多数 ...

  9. ajax xmlhttp 局部显示另一个页面

    function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera ...

  10. 4、libgdx应用框架

    (原文:http://www.libgdx.cn/topic/29/4-libgdx%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6) 模块 作为核心.libgdx提供了六个接 ...