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. 基于Vue3的Leaflet基础

    1. 概述 Leaflet 是一个开源.轻量并且对移动端友好的交互式地图 JavaScript 库,大小仅仅只有 39 KB, 拥有绝大部分开发者所需要的所有地图特性 Leaflet 的官网为:Lea ...

  2. 22 备份整合方案应用:Proxmox BS

    22 备份整合方案应用:Proxmox BS 22.1 深度整合备份解决方案 在PVE所内建的备份功能,当我们备份至本机路径(Directory).NFS/CIFS挂接的网路储存装置时,它每一次所做的 ...

  3. 学习操作系统P3 多处理器编程:从入门到放弃 (线程库;现代处理器和宽松内存模型)

    啊 啊 啊 啊 操作系统会自动把线程放置在不同的处理器上 可以用top观察CPU使用率 啊 啊 啊 啊 a 甚至连一个简单的求和程序都做不对 a 汇编语言中的 lock: CPU的特性,通过总线加锁, ...

  4. [Maven] 引入依赖以后如果标红怎么办

  5. 最火小游戏《羊了个羊》最新H5升级通关版

    背景 最近大火的微信小游戏<羊了个羊>刷爆朋友圈和群聊,大家都在搜索羊了个羊第二关怎么过.羊了个羊通关秘籍.这款小游戏实在难度太高,及其容易上瘾,而且很多朋友怎么也通不过. 这一次小编给大 ...

  6. 发送邮件找回密码采用outlook的 pop和smtp方式、qq邮箱smtp

    一.outlook的pop方式,并指定发送人邮箱地址: 需要引入dll:Microsoft.Office.Interop.Outlook Outlook.Application olApp = new ...

  7. Hadoop搭建超级详解

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  8. CISCO--配置单臂路由+DHCP

    CISCO--配置单臂路由+DHCP 1.在交换机中创建vlan10和20. Switch(config)#vlan 10 Switch(config-vlan)#vlan 20 2.接口Fa0/1配 ...

  9. consul剔除某个服务

    curl --request PUT  http://ip:端口/v1/agent/service/deregister/服务对应的id地址

  10. vue 使用mixin

    mixin 混入 混入提供了一种非常灵活的方式,来分发Vue组件中可以复用的功能,一个混入对象可以包括任意的组件选项,当组件使用混入对象时,所有的混入对象的选项 将被'混合'进入该组件本身的选项,混入 ...