点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现:
一:javascript实现方法技巧
<script>
//定义stopPropagation 方法的使用,该方法将停止事件的传播,阻止它被分派到其他 Document 节点。
 function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    };
//获取元素的ID
 function $(id) {
       return document.getElementById(id);
   };
//初始化加载
    window.onload = function () {
        document.onclick = function (e) {
            $("element").style.display = "none";
        }
        $("btn按钮").onclick = function (e) {
            $("element").style.display = "block";
            e = e || event;
          stopFunc(e);
        }
        $("element").onclick = function (e) {
            e = e || event; stopFunc(e);
        }
    }  
</script>
二:jquery实现方法技巧:
<script>
$("#btn按钮").on("click", function(e){
    $("#element").show();
    $(document).one("click", function(){
        $("#element").hide();
    });
    e.stopPropagation();
});
</script>
有更多更好的想法的朋友可以联系我Q:1159268659

js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div的更多相关文章

  1. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  2. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  3. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  4. js点击button按钮跳转到另一个新页面

    点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...

  5. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  6. 由点击页面其它地方隐藏div所想到的jQuery的delegate

    对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...

  7. js - 使用jquery发送前台请求给服务器,并显示数据

    1.使用jquery发送前台请求给服务器,并显示数据 <%@ page contentType="text/html;charset=UTF-8" language=&quo ...

  8. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  9. H5点击不同按钮跳转显示不同分页

    预期效果(页面1): 点击后显示对应的内容(页面2): HTML(页面1): 添加 onclick 跟 data-index     <!-- 3我的订单 -->     <div ...

随机推荐

  1. 一步一步理解 python web 框架,才不会从入门到放弃 -- 简单登录页面

    上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目 首先,新建一个 Django 项目,记得别弄错了哦. settin ...

  2. UWP中实现大爆炸效果(二)

    上一回实现了一个宽度不均匀的Panel,这次我们编写一个简单的BigbangView主体. 首先创建一个模板化控件,删掉Themes/Generic.xaml中的<Style TargetTyp ...

  3. [日志分析] Access Log 日志分析

    0x00.前言: 如何知道自己所在的公司或单位是否被入侵了?是没人来“黑”,还是因自身感知能力不足,暂时还没发现?入侵检测是每个安全运维人员都要面临的严峻挑战.安全无小事,一旦入侵成功,后果不堪设想. ...

  4. STM32学习笔记(一):跑马灯

    本实验所采用的开发板为正点原子的MiniSTM32f103rc开发板,主函数程序如下,注释如下:main.c #include "stm32f10x.h" void Delay(u ...

  5. sun.misc.Unsafe 详解

    原文地址 译者:许巧辉 校对:梁海舰 Java是一门安全的编程语言,防止程序员犯很多愚蠢的错误,它们大部分是基于内存管理的.但是,有一种方式可以有意的执行一些不安全.容易犯错的操作,那就是使用Unsa ...

  6. Java注解(一):介绍,作用,思想及优点

    “注解优先于命令模式”-出自<Effective Java> Java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单.注解(Annotation) 为我们在代码中添加信息提供 ...

  7. C#读写EXCEL单元格的问题

    最近, 我在用C#开发一个EXCEL Add-In的时候,发现了一些害人不浅的坑,特来总结列举如下: 这里我读写EXCEL引用的是using Excel = Microsoft.Office.Inte ...

  8. 粮草先行——Android折叠屏开发技术点(二)

    继该系列的第一篇和番外篇之后,今天我们来聊一聊多窗口开发的注意事项.实际上,与其说"多窗口开发",不如说让我们的APP适应多窗口模式. 可能有朋友会问,为什么要提到多窗口模式呢? ...

  9. 第11章 创建请求URLs - IdentityModel 中文文档(v1.0.0)

    该RequestUrl是创建与查询字符串参数,例如URL的帮手: var ru = new RequestUrl("https://server/endpoint"); // pr ...

  10. JS点击图片更改照片

    <img src="../../img/20190224185111.png" alt="" id="zhaopian"/> - ...