点击某个元素显示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. 系统的讲解 - PHP 接口签名验证

    目录 概览 常用验证 单向散列加密 对称加密 非对称加密 密钥安全管理 接口调试工具 在线接口文档 扩展 小结 概览 工作中,我们时刻都会和接口打交道,有的是调取他人的接口,有的是为他人提供接口,在这 ...

  2. [区块链] 共识算法之争(PBFT,Raft,PoW,PoS,DPoS,Ripple)

    近几天对区块链中几种常见的共识机制(PBFT,Raft,PoW,PoS,DPoS,Ripple)进行了总结.尽量使用简单易懂语言,篇幅较大,想了解的可以只读每个算法介绍中前边的原理.本篇文章主要参考& ...

  3. Java进阶篇设计模式之五-----外观模式和装饰器模式

    前言 在上一篇中我们学习了结构型模式的适配器模式和桥接模式.本篇则来学习下结构型模式的外观模式和装饰器模式. 外观模式 简介 外观模式隐藏系统的复杂性,并向客户端提供了一个客户端可以访问系统的接口.这 ...

  4. easyui表格自动换行

    表格内容自动换行可以通过设计表格属性  nowrap:false来实现,默认值为true: 但是easyui并未提供,表头自动换行的解决方案,因为一般我们的数据表格列名都是固定的,想换行的话可以通过& ...

  5. 实战web前端之:Bootstrap框架windows下安装与使用

    Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...

  6. 关于静态注册BroadcastReceiver接收不到广播的问题

    1.背景&解决方法 最近碰到一个需求,app监听特定的广播,接收到广播后启动自己再进行处理.需求很简单,静态注册就好,不过,在自测的时候遇到一个问题,app安装后没启动过的状态下,什么广播都收 ...

  7. Android路由框架-ARouter详解

    文章大纲 一.页面路由基本介绍1.什么是页面路由2.为什么要使用页面路由二.页面路由框架ARouter介绍1.常用功能介绍2.常见应用场景三.源码下载四.参考文章   一.页面路由基本介绍 1.什么是 ...

  8. 解决git Failed to connect to 127.0.0.1 port xxxx: Connection refused

    某天,用git拉取,提交代码的时候出现了git Failed to connect to 127.0.0.1 port xxxx: Connection refused的问题, 开始百度,看了一通.都 ...

  9. python3 装饰器初识 NLP第三条

    还是先抄一条NLP假设... 三,有效果比有道理更重要   光说做法有道理或者正确而不顾是否有效果,是在自欺欺人. 在三赢(我好,人好,世界好)的原则基础上追求效果,比坚持什么是对的更有意义. 说道理 ...

  10. ipv6地址配置实验(GNS3/ENSP)

    实验拓扑: IPV6地址配置如图所示, 配置ipv6指令(以R2为例,R1类似): int e1/2 R2(config-if)#ipv6 address 2001:db08:acad:1::2/64 ...