JS实战篇之收缩菜单表单布局

获取节点的两种方式：
1、通过event对象的srcElement属性；
2、通过事件源对象用this传入。

代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>收缩菜单 · 表单布局</title><script type="text/javascript">function list（dtNode）{// var dtNode = event.srcElement;var dlNode = dtNode.parentNode;// alert（dtNode.nodeName+"---"+dlNode.nodeName）;var dlNodes = document.getElementsByTagName（"dl"）;// alert（dlNodes.length）;for（var i=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><style type="text/css">dl{overflow: hidden;height: 18px;}.open{overflow: visible;}.close{overflow: hidden;}</style></head><！-- 获取节点的两种方式：1、通过event对象的srcElement属性；2、通过事件源对象用this传入 --><body><！-- 事件源是dt，但是操作的是dl --><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl><dl><dt onclick="list（this）">今天天气好晴朗</dt><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd><dd>今天天气好晴朗</dd></dl></body></html>