事件：onclick

属性：display

利用if语句实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<input id="btn1" type="button" value="显示隐藏"/>
<div id="div1"></div>
<script src="js1.js"> </script>
</body>
</html>

//////////////////css

#div1{
display:none;
width:100px;
height:300px;
background:green;
}

////////////////////js

var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
var oDiv=document.getElementById("div1");
if(oDiv.style.display=="none"){
oDiv.style.display="block";
}
else{
oDiv.style.display="none";
}
};

2.3点击菜单显示div再点击就隐藏的更多相关文章

  1. jquery点击添加样式，再点击取出样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. radio点击一下选中，再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  3. js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

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

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

  5. React 点击按钮显示div与隐藏div，并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  6. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

  7. jquery实现点击显示，再点击隐藏

    //点击a标签,轮流显示和隐藏<div id="timo" style="background-color:red;height:50px;width:50px;& ...

  8. js计时器，点击开始计时，再点击停止

    点击倒计时开始,点击停止,再次点击又开始,再点停止... <i id=</i>秒 <em onclick="timeOpen();">开始</e ...

  9. Jquery点击除了指定div元素其他地方，隐藏该div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

随机推荐

  1. 《coredump问题原理探究》Linux x86版7.9节list相关的iterator对象

    这一节.看一下list的iterator对象在内存的布局 1 #include <list> 2 3 void init( std::list<int>& lst ) ...

  2. java重载中的基本类型的自动类型转换

    当传递到函数的参数的数据类型表示的范围小于函数形参的参数类型遵循如下原则 : char类型比较特殊, 直接转换为int:  char ->int ->long->float-> ...

  3. Spring Boot集成MyBatis与分页插件

    Maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>p ...

  4. HDU1069 Monkey and Banana —— DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1069 Monkey and Banana Time Limit: 2000/1000 MS ...

  5. js验证form表单示例

    js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下:   <script type="text/javascript& ...

  6. appium学习【一】：pycharm运行不生成HtmlTestRunner测试报告

    参考文章和解决办法:http://blog.csdn.net/xie_0723/article/details/50825310                  http://jingyan.bai ...

  7. mysql 联合2个列的数据 然后呈现出来

    SELECT a.voyageNum,CONCAT(a.startDate,'~',a.endDate) AS 日期  FROM tchw_voyageoilcost a ,tchw_voyageoi ...

  8. 2-6 Opencv模块组织结构

    https://opencv.org/releases.html https://sourceforge.net/projects/opencvlibrary/files/opencv-win/3.4 ...

  9. CodeForces 730G Car Repair Shop (暴力)

    题意:给定 n 个工作的最好开始时间,和持续时间,现在有两种方法,第一种,如果当前的工作能够恰好在最好时间开始,那么就开始,第二种,如果不能,那么就从前找最小的时间点,来完成. 析:直接暴力,每次都先 ...

  10. CodeForces 721B Passwords (水题)

    题意:给定 n 个密码,你要按长度不递减的顺序进行尝试,问你最多和最少试多少次可能找出密码,每尝试 k 次错误的,就要等5秒. 析:我们只要把长度全都统计下来,然后从1开始去找目标长度,最少的就是正好 ...