隐藏：document.getElementById("has_children1").style.display="none";
显示：document.getElementById("has_children1").style.display="block";
或者 document.getElementById("has_children1").style.display=""; 因为默认是展开的。
另外判断展开或者隐藏，可以用全局变量来保存，也可以用以下类似判断:
if (document.getElementById("has_children1").style.display=="block") {
do something...
} else {
do something...
}
而本例子则直接用button的value作为判断依据。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>1-5-1</title>
<style type="text/css">
</style>
<!-- 在head标签中引入jQuery -->
<script src="scripts/jquery-1.5.min.js" type="text/javascript">
</script>
<!--
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
-->
<script type="text/javascript">
function jshow(){
document.getElementById("has_children1").style.display="none";
document.getElementById("has_children2").style.display="none";
document.getElementById("has_children3").style.display="none";
document.getElementById("has_children4").style.display="none";
// 01
document.getElementById("b1").onclick=function(){
var b11=document.getElementById("b1");
var b12=document.getElementById("b2");
var b13=document.getElementById("b3");
var b14=document.getElementById("b4");
if(b11.value=="展开"){
b11.value="收起";
b12.value="展开";
b13.value="展开";
b14.value="展开";
document.getElementById("has_children1").style.display="block";
document.getElementById("has_children2").style.display="none";
document.getElementById("has_children3").style.display="none";
document.getElementById("has_children4").style.display="none";
}else{
b11.value="展开";
document.getElementById("has_children1").style.display="none";
}
}
// 02
document.getElementById("b2").onclick=function(){
var b11=document.getElementById("b1");
var b12=document.getElementById("b2");
var b13=document.getElementById("b3");
var b14=document.getElementById("b4");
if(b12.value=="展开"){
b12.value="收起";
b11.value="展开";
b13.value="展开";
b14.value="展开";
document.getElementById("has_children2").style.display="block";
document.getElementById("has_children1").style.display="none";
document.getElementById("has_children3").style.display="none";
document.getElementById("has_children4").style.display="none";
}else{
b12.value="展开";
document.getElementById("has_children2").style.display="none";
}
}
// 03
document.getElementById("b3").onclick=function(){
var b11=document.getElementById("b1");
var b12=document.getElementById("b2");
var b13=document.getElementById("b3");
var b14=document.getElementById("b4");
if(b13.value=="展开"){
b13.value="收起";
b12.value="展开";
b11.value="展开";
b14.value="展开";
document.getElementById("has_children3").style.display="block";
document.getElementById("has_children2").style.display="none";
document.getElementById("has_children1").style.display="none";
document.getElementById("has_children4").style.display="none";
}else{
b13.value="展开";
document.getElementById("has_children3").style.display="none";
}
}
// 04
document.getElementById("b4").onclick=function(){
var b11=document.getElementById("b1");
var b12=document.getElementById("b2");
var b13=document.getElementById("b3");
var b14=document.getElementById("b4");
if(b14.value=="展开"){
b14.value="收起";
b12.value="展开";
b13.value="展开";
b11.value="展开";
document.getElementById("has_children4").style.display="block";
document.getElementById("has_children2").style.display="none";
document.getElementById("has_children3").style.display="none";
document.getElementById("has_children1").style.display="none";
}else{
b14.value="展开";
document.getElementById("has_children4").style.display="none";
}
}
}
</script>
</head>
<body _disibledevent=>
第1章-认识jQuery<input type="button" id="b1" value="展开"/><br/>
<div id="has_children1">
<a>1.1-JavaScript和JavaScript库</a><br/>
<a>1.2-加入jQuery</a><br/>
<a>1.3-JavaScript和JavaScript库</a><br/>
<a>1.4-JavaScript和JavaScript库</a><br/>
<a>1.5-JavaScript和JavaScript库</a><br/>
<a>1.6-JavaScript和JavaScript库</a><br/>
<a>1.7-JavaScript和JavaScript库</a><br/>
</div>
第2章-jQuery选择器<input type="button" id="b2" value="展开"/><br/>
<div id="has_children2">
<a>2.1-jQuery选择器是什么</a><br/>
<a>2.2-jQuery选择器的优势</a><br/>
<a>2.3-jQuery选择器是什么</a><br/>
<a>2.4-jQuery选择器是什么</a><br/>
<a>2.5-jQuery选择器是什么</a><br/>
<a>2.6-jQuery选择器是什么</a><br/>
</div>
第3章-jQuery中的DOM操作<input type="button" id="b3" value="展开"/><br/>
<div id="has_children3">
<a>3.1-DOM操作的分类</a><br/>
<a>3.2-jQuery中DOM的操作</a><br/>
<a>3.3-jQuery选择器是什么</a><br/>
<a>3.4-jQuery选择器是什么</a><br/>
<a>3.5-jQuery选择器是什么</a><br/>
<a>3.6-jQuery选择器是什么</a><br/>
</div>
第4章-jQuery中的DOM操作<input type="button" id="b4" value="展开"/><br/>
<div id="has_children4">
<a>4.1-DOM操作的分类</a><br/>
<a>4.2-jQuery中DOM的操作</a><br/>
<a>4.3-jQuery选择器是什么</a><br/>
<a>4.4-jQuery选择器是什么</a><br/>
<a>4.5-jQuery选择器是什么</a><br/>
<a>4.6-jQuery选择器是什么</a><br/>
</div>
</body>
</html>
最新评论