点击按钮显示隐藏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构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

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

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

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

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

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

  5. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  6. javascript学习代码--点击按钮显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 例题.点击按钮显示内容+弹窗效果+ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

  9. jquery 点击按钮实现listbox的显示与隐藏,点击其他地方按钮外的地方,隐藏listbox

    本来不知道如何获取服务器的控件的,这下知道可以这么做了,所以记录下来.... <asp:ImageButton ID="alltime" ImageUrl="ima ...

随机推荐

  1. 干货来袭-整套完整安全的API接口解决方案

    在各种手机APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优 在以前WEB API概念没有很普及的时候,都采用自已定义的接口和结构,对 ...

  2. 离线安装swashbuckle(webapi自动文档及测试工具)

    1.找到已经成功安装过的项目根目录的packages文件夹拷贝到新的项目的根目录 2.vs设置nuget程序包源 将源:地址改为新项目的packages文件夹 3.重新编译并修改代码 右键项目-> ...

  3. 使用hovertree菜单作为后台导航

    hovertree是一个jquery菜单插件,官方网址:http://keleyi.com/jq/hovertree/ ,可以登录该网址体验效果. 0.1.3版本:http://keleyi.com/ ...

  4. 【codevs1033】 蚯蚓的游戏问题

    http://codevs.cn/problem/1033/ (题目链接) 题意 给出一个梯形的数列,每一个数可以向它左下方和右下方的数走.求从第一行走到最后一行的不重叠的K条路径,使得经过的数的和最 ...

  5. moment.js 的简单应用

     moment.js :时间处理的组件 例子:moment.html <!DOCTYPE html> <html> <head> <title>mome ...

  6. Mysql学习笔记(四)字符串函数

    PS:终于看完了字符串函数,心都快碎了...涉及的函数真是太多了...感觉这里的字符串函数和JAVA里的基本都差不多了...基本上算是掌握了,但是想全记住那是不太可能的... 学习内容: 字符串函数的 ...

  7. SQL Server 2008 R2 数据库安装

    操作系统    Windows server 2008 R2 数据库      SQL Server 2008 R2 注意:SQL Server 2008 R2需要操作系统首先安装.NET Frame ...

  8. 保留ip: Reserved IP addresses

    Reserved IP addresses From Wikipedia, the free encyclopedia     In the Internet addressing architect ...

  9. javaWeb开发总结 ---- 前端数据插入到后台

    一,概述: 本文主要描述如何将数据通过表单提交到后台并插入到数据库.其中后台使用spring框架. 二,开发流程: 明确需求,即将什么数据插入到数据库 平台搭建,配置spring, 数据库,建表 走通 ...

  10. [C#]中英文字幕合并的小程序

    今天班里小组合作录了一个视频,我给它做了字幕的时间轴.为了让这个视频假装很高端的样子,我想再加上英文的字幕.中文的纯字幕文本先搞成一句一行,然后放到Google翻译上,复制英文保存在Eng.txt. ...