JS实战篇之收缩菜单表单布局
网络编程 2021-07-04 19:19www.168986.cn编程入门
这篇文章主要介绍了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>
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程