獲取節點的兩種方式:
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>