var box = document.getElementById("box");

var btn = document.getElementById("btn");
             
btn.onclick = function(event){
    event.stopPropagation();
    if(box.style.display == "none"){
        box.style.display = "block";
    }else{
        box.style.display = "none";
    }
};
window.onclick = function(){
    box.style.display = "none"
};           

js实现点击按钮或div显示与隐藏div的更多相关文章

  1. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

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

  2. 点击按钮时,显示不同的div内容

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

  3. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  4. JS 实现显示和隐藏div(以百度地图为例)

    主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html ...

  5. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  6. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  7. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  8. css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  9. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  10. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

随机推荐

  1. jquery获得标签的值或元素的内容

    例如: .html() 获取a标签中的i元素 console.error($("a[name=" + index + "]").html()); 设置a标签里的 ...

  2. #加IPV6路由

    #加IPV6路由route -A inet6 add 2409:802f:6005:4204::31:0/123 gw 2409:805b:6005:4218::41f:1#路由写入网卡配置文件vi ...

  3. 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive

    问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...

  4. C++ MFC字符转换

    创建Win32 空项目 字符说明:国外 1个字符对应1个字节   多字节 中文  1个字符对应对个字节  宽字节   Unicode  utf-8  3个   GBK  2个 多字节转为 宽字节    ...

  5. openssl用法详解 【转】

    原文: http://www.178linux.com/48764 OpenSSL 是一个开源项目,其组成主要包括一下三个组件: openssl:多用途的命令行工具 libcrypto:加密算法库 l ...

  6. Java面向对象之封装详解

    封装详解 封装 该露的露,该藏的藏 1.我们程序设计要追求"高内聚.低耦合".高内聚:类的内部数据操作细节自己完成,不允许外部干涉:低耦合:仅暴露少量的方法给外部使用. 封装(数据 ...

  7. DataWork之 MaxComputer的使用

    注意: 由于MaxComputer里面没有主键 默认主键为 保单号+8位险种代码+责任起期 若无主键限制,就对所有的字段进行分组 所以每次join的时候,where条件需要加上 a.主键 =b.主键 ...

  8. RabbitMQ-00-Windows10安装RabbitMQ及安装使用过程中遇到的一些问题

    Window系统安装教程 安装参考博客:https://blog.csdn.net/spl545056/article/details/81392015 重装RabbitMQ时遇到的问题 安装提示成功 ...

  9. 内网Linux下安装Nginx1.23,添加stream模块实现tcp/udp代理转发

    环境:centos7.6 ngx_stream_core_module 这个模块在1.9.0版本后将被启用.但是并不会默认安装,需要在编译时通过指定 --with-stream 参数来激活这个模块,w ...

  10. Angular 依赖注入的错误 NullInjectorError, No provider for XXX

    一.在module的providers区域里,为pipe维护具体的实现类 二.如果不想改动module.ts,可选择直接在组件中注入