点击某个元素显示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. OSI七层协议与TCP连接

    概述 为了追求效率,我们写代码,不可能去关注底层知识,但往往到出了问题,或者性能调优.我们就会速手无策,仔细为自己查缺补漏,总结知识点. 网络协议 互联网的本质就是一系列的网络协议,让不同计算机能够互 ...

  2. 斯坦福CS224n课程作业

    斯坦福CS224n作业一 softmax 作业要求如下: 解析:题目要求我们证明\(softmax\)函数具有常数不变性. 解答:对于\(x+c\)的每一维来说,有如下等式成立: \[softmax( ...

  3. ASP.NET Core在Azure Kubernetes Service中的部署和管理

    目录 ASP.NET Core在Azure Kubernetes Service中的部署和管理 目标 准备工作 注册 Azure 账户 AKS文档 进入Azure门户(控制台) 安装 Azure Cl ...

  4. 只有一百行的xss扫描工具——DSXS源码分析

    目录 0x00 废话 0x01 扫描逻辑 第一个逻辑:dom型xss 第二个逻辑:经过后端的xss 0x02 总结 0x00 废话 DSXS是一个只有一百行代码的xss扫描器,其作者刚好就是写sqlm ...

  5. 基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架

    前后端分离的开发机制,基本上是开发现代业务系统的标配.可在国内某些特殊领域还是存在大量的以JQuery走天涯的现象,但其中也不泛有追求技术者,如不才的鄙人.不才的本人曾以JQuery走天涯:后又接受了 ...

  6. 阿里云ECS安装Cadvisor报错

    阿里云ECS安装Cadvisor报错安装命令: sudo docker run \ --volume=/:/rootfs:ro \ --volume=/var/run:/var/run:ro \ -- ...

  7. java并发编程(2) --Synchronized与Volatile区别

    Synchronized 在多线程并发中synchronized一直是元老级别的角色.利用synchronized来实现同步具体有一下三种表现形式: 对于普通的同步方法,锁是当前实例对象. 对于静态同 ...

  8. KnockoutJS知识规整目录

    对于Web开发来讲,前端接触是避免不了的,特别是对于中小公司,没有严格的职位区分,前后端人员互相身兼是常有的事情,使用一些好的框架,能够帮助我们快速开发并完成需要的功能,对于前端的JS框架来讲MVVM ...

  9. 利用Asp.Net Core的MiddleWare思想处理复杂业务流程

    最近利用Asp.Net Core 的MiddleWare思想对公司的古老代码进行重构,在这里把我的设计思路分享出来,希望对大家处理复杂的流程业务能有所帮助. 背景 一个流程初始化接口,接口中根据传入的 ...

  10. renren-fast开源项目解析日志—1、项目的部署

    renren_fast项目解析日志 一.环境搭建 1.后端部署 (1)下载源码 按照步骤,从码云上down了fast,zip的(引maven项目)项目包. (2)安装lombok插件 安装lombok ...