可以参考下面的代码：
var tag="off";//记录开关状zd态
function test(obj){
//打开
if(tag=="off"){
obj.style.height="150px";//展开的高度版
tag="on";//开关设为打开状态
}else{
obj.style.height="0px";//高度设权为0
obj.style.display="none";//隐藏
tag="off";//开关设为关闭
}
}
扩展资料：
javaScript参考函数
getHours() 返回小时数(0-23)
getMinutes() 返回分钟(0-59)
getSeconds() 返回秒数(0-59)
getMilliseconds() 返回毫秒(0-999)
getUTCDate() 依据国际时间来失掉日(1-31)
getUTCMinutes() 根据邦际光阴来往归分钟(0-59)
getUTCSeconds() 依据国际时间来返回秒(0-59)
getUTCMilliseconds()依据国际时间来返回毫秒(0-999)
参考资料来源：百度百科-javascript
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2018-05-14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function show(obj){
var obj=document.getElementById(obj); //获得id为b的容器
//如果下面的内容显示的话就隐藏
if(obj.style.display=="block"){
obj.style.display="none";
}else
obj.style.display="block";
}
</script>
<style type="text/css" >
li{ list-style-type:none;}
#b{ display:none;}
#a input{ border:none; width:50px; background-color:#CCCCCC; }
</style>
</head>
<body>
<div id="a"><input type="button" onclick="show('b')" value="导航">
<div id="b">
<ul>
<li>首页</li>
<li>日志</li>
<li>相册</li>
<li>学习</li>
<li>作品</li>
<li>留言</li>
</ul>
</div>
</div>
</body>
</html>
只是一个实现思路，布局什么的都没有搞本回答被提问者和网友采纳
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function show(obj){
var obj=document.getElementById(obj); //获得id为b的容器
//如果下面的内容显示的话就隐藏
if(obj.style.display=="block"){
obj.style.display="none";
}else
obj.style.display="block";
}
</script>
<style type="text/css" >
li{ list-style-type:none;}
#b{ display:none;}
#a input{ border:none; width:50px; background-color:#CCCCCC; }
</style>
</head>
<body>
<div id="a"><input type="button" onclick="show('b')" value="导航">
<div id="b">
<ul>
<li>首页</li>
<li>日志</li>
<li>相册</li>
<li>学习</li>
<li>作品</li>
<li>留言</li>
</ul>
</div>
</div>
</body>
</html>
只是一个实现思路，布局什么的都没有搞本回答被提问者和网友采纳
第2个回答 2011-10-26
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var zhi = '1';
function show_or_none(){
if(zhi =="1"){
document.getElementById('div1').style.display="none";
zhi = "2";
}else{
document.getElementById('div1').style.display="block";
zhi = "1";
}
}
</script>
</HEAD>
<BODY>
<div onclick="javascript:show_or_none();" style="background:pink;">导航(展开/关闭)</div>
<div id="div1">
<p>首页1</p>
<p>首页2</p>
<p>首页3</p>
</div>
</BODY>
</HTML>
自己写的一个简易的展开和关闭
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var zhi = '1';
function show_or_none(){
if(zhi =="1"){
document.getElementById('div1').style.display="none";
zhi = "2";
}else{
document.getElementById('div1').style.display="block";
zhi = "1";
}
}
</script>
</HEAD>
<BODY>
<div onclick="javascript:show_or_none();" style="background:pink;">导航(展开/关闭)</div>
<div id="div1">
<p>首页1</p>
<p>首页2</p>
<p>首页3</p>
</div>
</BODY>
</HTML>
自己写的一个简易的展开和关闭
第3个回答 2011-10-27
用jquery，十分方便！
相似回答