点击某个元素显示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. MYSQL——解题查询语句答题思路,再难的查询都不怕!

    select查询语句,作为测试人员,使用此语句是家常便饭,是必须掌握的部分,由开始学习mysql到网上搜索试题做,开始做题一塌糊涂,拿到题目就晕,无从下手,现在慢慢总结了一套自己做题的方式,很开森,嘿 ...

  2. 记一次产品需求:图片等比缩放和CSS自适应布局16:9

    前言 前阵子,产品跑过来问我现有的模板中没有图片模板,需要添加一个图片模板:然而,他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放,并且居中展示图片.我当时想着,抛开技术实现层面, ...

  3. 搭建SpringCloud-Eureka 注册中心以及服务提供与调用

    纸上得来终觉浅,绝知此事要躬行啊~果然看着很easy,自己搞起来就是各种坑~各位看官,容我慢慢道来~ 关于springcloud是什么我就不废话了~ Eureka  Eureka(原来以为是缩写,原来 ...

  4. 基于tcp的套接字编程

    一,基础版服务器端客户端(一收一发,只有一个客户端链接) 服务器端: #Author : Kelvin #Date : 2019/1/28 22:10 from socket import * ser ...

  5. Linux-误删apt-get以及把aptitude换回

    误删apt-get拯救我的linux 一.前言 先来说一下apt-get, 这个我们使用linux过程中最常用的命令之一. apt-get是一条linux命令,适用于deb包管理式的操作系统,主要用于 ...

  6. matplotlib种类

    matplotlib模板: 1:线图 plot()单线段图 2:多个线图 subplot()Multiple axes (i.e. subplots) are created with the sub ...

  7. 游戏服务器h2engine架构优化和跨平台设计

    H2engine的GitHub星星不知不觉已经破百了,也没有特意推广过,但是慢慢的关注的人越来越多.因为事情多,好久没有写东西了,前一段时间有了一些想法,把h2engine又更新了一下,感觉h2eng ...

  8. C#读写Excel的几种方法

    1 使用Office自带的库 前提是本机须安装office才能运行,且不同的office版本之间可能会有兼容问题,从Nuget下载 Microsoft.Office.Interop.Excel 读写代 ...

  9. 全球第一免费开源ERP Odoo WMS库存管理高级路线设置详解

    概览 路线就是推规则和拉规则的合并整理.Odoo可以配置高级推/拉路线的配置, 例如 : 管理产品的制造链条 为每个产品管理默认位置 根据业务需求在仓库中定义路线, 例如质检, 售后和供应商退货 租用 ...

  10. Android音视频之AudioRecord录音(一)

    在音视频开发中,录音当然是必不可少的.首先我们要学会单独的录音功能,当然这里说的录音是指用AudioRecord来录音,读取录音原始数据,读到的就是所谓的PCM数据.对于录音来说,最重要的几个参数要搞 ...