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. 五十条常用的MySQL语句

    1.查询"001"课程比"002"课程成绩高的所有学生的学号:select a.S# from (select s#,score from SC where C ...

  2. IDEA 上传项目到 Gitee 小记

    此方式可直接将 IDEA 中项目上传到 Gitee 仓库,无需打开 Gitee 手动创建空仓库. 前提环境 安装好 Git,并在 IDEA 中成功配置: 注册有 Gitee 账号,并记得账号密码: I ...

  3. Mybatis-概览地图

    思考: "为什么在使用 Mybatis 的时候,只需定义一个接口,不用写实现类就能使用XML中或者注解上配置好的SQL语句,就能完成对数据库 CRUD 的操作呢?" 这是因为用到了 ...

  4. centos7 安装MariaDB数据库

    1.添加 MariaDB yum源 #添加MariaDB.repo配置文件 vim /etc/yum.repos.d/MariaDB.repo #添加内容 [mariadb] name = Maria ...

  5. 苹果iPhone 日历查询功能异常

    2022年底苹果发布了IOS16.2版本系统,此时间段内所有升级的用户都将会出现日历查询功能失效,字符错乱等诸多问题. 与客服沟通后告知,日历记录内容查询是没有时间限制的,可以无限期查询全部内容,于是 ...

  6. opc ua与opc da区别

    opc ua与opc da区别_OPC,OPCDA,OPCUA傻傻搞不清楚,走过路过不妨看一看 转自:https://blog.csdn.net/weixin_39624774/article/det ...

  7. Java学习笔记(二)java流程控制

    学习笔记2 Java流程控制 这次也是跟着[狂神说Java]Java零基础学习视频通俗易懂继续学习的,持续学习,你我共勉. 一. 用户交互Scanner 1. Scanner对象 之前学的基本语法没有 ...

  8. [后端-Python]-项目练习集

    1 1. 2 ''' 3 knowledge_point: 4 1.练习if...else: 5 2.练习while; 6 3.练习列表的切片取值: 7 8 requirements: 9 购物车: ...

  9. CVE-2018-8174漏洞复现(IE浏览器远程代码执行漏洞)

    漏洞介绍:CVE-2018-8174这个漏洞是针对IE浏览器的一个远程代码执行漏洞,是Windows VBScript Engine 代码执行漏洞,由于VBScript脚本执行引擎(vbscript. ...

  10. wget 和 curl的区别

    原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...