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. Access数据库使用

    简单介绍创建表,设置表属性,内容 双击打开软件,新建空白数据库 上面创建--表,右侧右键点击表1,选择保存,输入表名称. 左侧右键点击表--打开设计视图 设置表内容及格式,首行默认为主键,需右键点主键 ...

  2. SQLServer 编程总结

    case的用途 case语句有四个关键字,缺一不可,分别是:case when then end,另外还有一个else.case 后面跟字段名(当在when后面出现字段名时,case里不能写出来),w ...

  3. vue学习笔记:环境搭建

    一.安装node.js node.js的官方地址为:https://nodejs.org/en/download/ 下载好安装包点击安装,基本就是下一步.下一步.... 安装完成后可以通过以下两种方式 ...

  4. Ubuntu系统安装搜狗拼音输入法

    问题背景 Ubuntu是使用人数最多的Linux发行版之一,其丰富的生态广受各位种花家程序员小伙伴们的欢迎.对种花家小伙伴们来说,最重要的功能之一就是中文输入法了.但是Ubuntu自带的中文输入法效果 ...

  5. 下载nodejs和vue

    下载nodejs https://nodejs.org/en 下载或更新npm npm install cnpm -g npm install -g vue 全局安装 创建一个基于 "web ...

  6. reids 启动方法

    ---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入"cmd",回车 二,然后会进入cmd ...

  7. 新的学习历程-python5 输入输出基础

    1 uname=input("please input username:") 2 print("welcome",uname) #print各项间默认以空格作 ...

  8. 题解[LuoguP6222]「P6156简单题」加强版

    题解[LuoguP6222]「P6156简单题」加强版 加强版很好地体现了这个题的真正价值.(当然是指卡常 本题解给出了本题更详尽的推倒导和思考过程,思路与 CYJian 的类似,具体式子的个别地方换 ...

  9. centos 换源

    原文: https://blog.csdn.net/MateSnake/article/details/124088310 备份原来的源:sudo mv /etc/yum.repos.d/CentOS ...

  10. AgilePoin规则执行

    我在写窗体规则时,明明默认值已经绑定,但是在页面加载时规则并没有起作用,导致改隐藏的没隐藏,该显示的不显示.找了半天,发现规则设置时可选择执行事件. 设置在页面加载时执行规则后,发现还是不能正确显隐组 ...