JS实战篇之收缩菜单表单布局
获取节点的两种方式：
1、通过event对象的srcElement属性；
2、通过事件源对象用this传入。
代码如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>收缩菜单·表单布局</title>
<scripttype="text/javascript">
functionlist(dtNode){
//vardtNode=event.srcElement;
vardlNode=dtNode.parentNode;
//alert(dtNode.nodeName+"---"+dlNode.nodeName);
vardlNodes=document.getElementsByTagName("dl");
//alert(dlNodes.length);
for(vari=0;i<dlNodes.length;i++){
if(dlNodes[i]==dlNode){
/*判断当前标题是展开还是关闭状态，默认关闭，先执行else语句*/
if(dlNode.className=="open"){
dlNode.className="close";
}
else{
dlNode.className="open";
}
}
else{
dlNodes[i].className="close";
}
}
}
</script>
<styletype="text/css">
dl{
overflow:hidden;
height:18px;
}
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
</style>
</head>
<!--获取节点的两种方式：
1、通过event对象的srcElement属性；
2、通过事件源对象用this传入
-->
<body>
<!--事件源是dt，但是操作的是dl-->
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
<dl>
<dtonclick="list(this)">今天天气好晴朗</dt>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
<dd>今天天气好晴朗</dd>
</dl>
</body>
</html>