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>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> <dl> <dt>今天天气好晴朗</dt> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> <dd>今天天气好晴朗</dd> </dl> </body> </html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwffjg.html