2.3点击菜单显示div再点击就隐藏

事件: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";
}
};

原文地址:https://www.cnblogs.com/luxiaoli/p/8504500.html

时间: 2024-08-29 07:43:40

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

jquery点击添加样式,再点击取出样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击添加边框,再点击去掉边框</title> <style> ul li{ float:left; list-style:none; width:50px; height:30px; border:1px solid #E3E3E3; line-height:30px; text-al

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

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>

Quick cocos2dx-Lua(V3.3R1)学习笔记(五)------创建精灵 菜单,让我们做个最简单的点击菜单显示精灵吧

开始第5篇笔记了,感觉前面的几篇写的太少了,Quick cocos2dx 前面加个quick,就是就能让我们快速上手,快速开发......balabala 一,我们来创建第一个精灵 今天我们来创建精灵,我们前面显示的外星人图片就是一个精灵. quick给我们提供了display.newSprite这个函数来创建精灵. 我们进入display.lua中看看对这个函数的介绍说明. 哇,这么长,我怎么知道那个函数定位在哪里(不是有搜索吗,不能Ctrl+F搜索么+_+). 我们换个方法,不用搜索,毕竟我

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

在自定义的tabbar 中间按钮 点击出现一个view 再点击view返回

入职第三天 遇到一个小问题 记下来 问题是自定义的tabbar 中间一个加号按钮 点击从下弹出一个view,再点击 view返回 首先再tabbar的view .h添加一个代理方法 在.m中 在tabbar的VC.m中实现代理方法( 我是在这里加了一个判断 反正实现了 菜鸟的做法吧,不加判断 点击回不去) 创建view的V和C 在V中 添加一个单例类 创建了view的坐标 在V.m中 创建好view的show 和dismiss 两个方法 这样大功告成了 中间还有一些细节 我也不知道怎么说 dis

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <title></title> <script type="text/javascript"&

Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框

实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin

jq点击显示,再点击隐藏

每次都会遇到的问题: <script> $("button").click(function(){ if($(".div").css("display")=="none"){ $(".div").show(); }else{ $(".div").hide(); } }); </script>

子菜单显示了,就不想隐藏了

今天有做一个小功能,就是mouse经过主菜单之后,子菜单就永久显示,除非刷新了网页. 先来看年实现的效果: Html代码: Source code: <div id="top"> <div id="top_1"> <ul> <li style="position:relative;"> <a href="#" id="Menu1" style="