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. 按highcharts中column形式转对象展现格式

    highcharts图表type:column事例的格式是这样的: (不论接口返回什么格式,需要转换成下面这样的): xAxis: { categories: ['一月','二月'], }, seri ...

  2. LeetCode-911 在线选举

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/online-election 题目描述 给你两个整数数组 persons 和 times .在选 ...

  3. Codeforces Round #757 (Div. 2) - D2. Divan and Kostomuksha (hard version)

    GCD + DP + 调和级数/埃式筛 [Problem - D - Codeforces](https://codeforces.com/contest/1610/problem/D) 题意 给出一 ...

  4. K8存储之ConfigMap、Secret

    ConfigMap ConfigMap是一种API对象,用来将非加密数据保存到键值对中.可以用作环境变量.命令行参数或者存储卷中的配置文件. ConfigMap供容器使用的典型用法如下: 生成为容器内 ...

  5. python虚拟环境解决不能执行脚本的问题

    1 安装虚拟环境 pip install virtualenv 2 创建虚拟文件夹 mkdir .venvs 3.设置虚拟目录 virtualenv --system-site-packages .v ...

  6. vue中input触发方法中调用ajax,导致input失去焦点问题

    发现在vue中监控input绑定的值,调用方法时,如果方法中有调用后端接口(使用Ajax),会导致input输入框失去焦点,这样导致的问题就是每输入一个字符,就要重新聚焦一次,可通过以下方式在方法中重 ...

  7. HttpClient线程池&重试机制

    HttpClientUtils package com.example.http_thread.util; import org.apache.http.HttpEntityEnclosingRequ ...

  8. jenkins目录

    Jenkins目录详解: jobs目录:创建的所有jenkins工程.并含有所有构建历史记录和日志.其中config.xml为具体配置. plugins:所有插件 workspace:构建工程本机源码 ...

  9. wps - Word文档打开后不能编辑

    Word文档打开后不能编辑 解决方式 [审阅]-[限制编辑]-[设置文档的保护方式]-[修订]-[启动保护]-[停止保护] Word文档打开后不能编辑,可以这样处理 打开Word文档后,发现无法输入内 ...

  10. VMvare虚拟机的安装及新建虚拟机(一)

    a:hover { color: rgba(255, 102, 0, 1) } 一.VMvare虚拟机的安装 1.首先双击--你下载的安装包,这里我分享百度云盘,供大家下载:http://pan.ba ...