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>