JS实战篇之收缩菜单表单布局
作者：AllSight 发布时间：2024-04-18 09:47:43
标签：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>
来源：http://www.cnblogs.com/panweiwei/p/6154816.html
0
投稿猜你喜欢
现实生活中，有很多场景中的事情是同时进行的，比如开车的时候，手和脚共同来驾驶汽车，再比如唱歌跳舞也是同时进行的。以上这些可以理解为多任务。那- 前言一首歌热门了，参与评论的人也很多，这时无论好坏评论都来了，没有人控评得话，指不定乱七八糟但是自己有喜欢看评论，不想影响好心情，想看看精彩
- 代码如下:--程序员们在编写一个雇员报表，他们需要得到每个雇员当前及历史工资状态的信息， --以便生成报表。报表需要显示每个人的晋升日期和工
- 最近发现一个问题，是关于IDEA的一些骚操作的事儿~具体怎么回事，一起来看看。我们都知道使用git分布式版本控制工具，提、拉 代码都会有一个
- 1.Mysql的逻辑架构Mysql的逻辑架构如下所示，整体分为两部分，Server层和存储引擎层。与存储引擎无关的操作都是在Server层完
- 1.find函数find() 方法检测字符串中是否包含子字符串 str ，如果指定 beg（开始） 和 end（结束） 范围，则检查是否包含
- python中调用字典中key的方法：使用list()方法将字典中的keys转化为列表，然后通过列表索引值值即可调用指定的key。# -*-
- mysql作为轻量级开源数据库，在企业级的应用中非常的广泛。我之前用过mssql，oracle，postgresql，mysql。目前阿里云
- 无意间碰到的一个大神整理的Python学习思维导图，感觉对初学者理清学习思路大有裨益，非常感谢他的分享。14 张思维导图基础知识数据类型序列
- 前言：在使用DDT数据驱动+HTMLTestRunner输出测试报告时遇到过2个问题：1、生成的测试报告中，用例名称后有dict() -&g
- 发一个数字拼图游戏，有点小疑问前几天写得，其中一段代码还要感谢“簡簡單單愛妳”的提示，不过我还是不太明白， ，有点笨。 $(&qu
- MySQL 8 带来了全新的体验，比如支持 NoSQL、JSON 等，拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Win
- 一、 排序的基本使用在查询数据时，如果没有使用排序操作，默认情况下SQL会按元组添加的顺序来排列查询结果。在SQL中，使用关键字 ORDER
- mysql存储引擎：MySQL服务器采用了模块化风格，各部分之间保持相对独立，尤其体现在存储架构上。存储引擎负责管理数据存储，以及MySQL
- 近段时间看了一些论坛上面关于分页的ASP程序依然有许多的关注者，但里面只有代码，没有详细的解释，对于初学者来说，这样总是得不到真正的掌握，此
- 本文实例讲述了Python挑选文件夹里宽大于300图片的方法。分享给大家供大家参考。具体分析如下：这段代码需要用到PIL库。代码如下所示：i
- 不止一次在微信、知乎有读者朋友跑过来问：看完了基础书，甚至看两遍了，但自己写的时候还是没思路，我该怎么办？编程在我看来就是一门手艺活，绝不是
- ASP日期和时间函数我们经常会用到，本文列出了12个常用的asp日期和时间函数的语法及用法以作备忘！1.Now Now() 取
- 列表更多的方法index()：返回指定数据所在位置的下标 (注意：如果查找的数据不存在则报错。)。count()：统计指定数据在当前列表中出
- PHP中的MYSQL常用函数1、mysql_connect()-建立数据库连接格式：resource mysql_connect([stri
