1，这种方法就是类似于在一般的网站左边有导航栏，然后有+ -显示或者折叠信息
<html>
<head>
<title>document示例--树状展开和关闭</title>
<script language="javascript" type="text/javascript">
<!--
function test1_onclick(){
if(test1.innerText=="-"){
myList.style.display="none";
test1.innerText="+";
}else{
myList.style.display="block";
test1.innerText="-";
//怎样体现body的all这个对象的作用
//因为你可以通赤body的all来访问body中所有的控件(通过id)
//所以代码可以写成
//document.body.all.test1.innerText="-";
//document.body.all("text1").innerText="-";
//document.body.all.item("text1").innerText="-";
}
}
function test2_onclick(){
if(test2.innerText=="-"){
myNation.style.display="none";
test2.innerText="+";
}else{
myNation.style.display="block";
test2.innerText="-";
//怎样体现body的all这个对象的作用
//因为你可以通赤body的all来访问body中所有的控件(通过id)
//所以代码可以写成
//document.body.all.test1.innerText="-";
//document.body.all("text1").innerText="-";
//document.body.all.item("text1").innerText="-";
}
}
//-->
</script>
</head>
<body>
<p style="background-color:pink">
<FONT face="宋体" background-color="pink">
<span id=test1 style="border-left-color:#ff0099;border-bottom-color:#ff0099;cursor:hand;border-top-style:ridge;border-right-color:#ff0099;border-bottom-style:ridge;" language=javascript onclick="return test1_onclick()">-</span>
myFamily家庭成员的选择
</FONT>
</p>
<ul id=myList>
<li><font face="宋体">爸爸</font></li>
<li><font face="宋体">妈妈</font></li>
<li><font face="宋体">弟弟</font></li>
</ul>
<p style="background-color:yellow">
<FONT face="宋体">
<span id=test2 style="border-left-color:#ff0099;border-bottom-color:#ff0099;cursor:hand;border-top-style:ridge;border-right-color:#ff0099;border-bottom-style:ridge" language=javascript onclick="return test2_onclick()">-</span>
nations国家的选择
</FONT>
</p>
<ul id=myNation>
<li><font face="宋体">中国</font></li>
<li><font face="宋体">美国</font></li>
<li><font face="宋体">日本</font></li>
</ul>
</body>
</html>
2，很多时候网站的表单复选框checkbox或者其他内容可以实现一键全选或者全部取消的功能
<!DOCTYPE html>
<html>
<head>
<title>复选框checkbox</title>
<script type="text/javascript" language="javascript">
function selectCheck(obj){
var fruits=document.getElementsByName("fruit");
if(obj.innerText=="全选"){
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = true;
}
}else{
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = false;
}
}
}
//响应复选框的
function selectCheck2(){
var fruits=document.getElementsByName("fruit");
if(myselect.checked){
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = true;
}
}else{
for ( var i = 0; i < fruits.length; i++) {
fruits[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="10" />
苹果 10元
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="20" />
香蕉 20元
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="30" />
西瓜 30元
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="40" />
栗子 40元
<br>
<input type="checkbox" name="fruit" onclick="gouwu(this)" value="50" />
哈密瓜 50元
<br>
<a href="#" onclick="selectCheck(this)">全选</a>
<a href="#" onclick="selectCheck(this)">取消</a><br>
<input type="checkbox" id="myselect" onclick="selectCheck2()"/>是否全选
</body>
</html><strong>
</strong>