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
投稿猜你喜欢
我们都知道Django rest framework这个库，默认只支持批量查看，不支持批量更新（局部或整体）和批量删除。下面我们来讨论这个问- 学习JQUERY就应该从最基本的学起，基本的就应该是语法了，在这里，我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了，都是
- 本文实例讲述了Python实现批量修改图片格式和大小的方法。分享给大家供大家参考，具体如下：第一种方法用到opencv库import osi
- Python安装为什么默认安装到c盘？所有的软件如果你不对安装过程的路径进行设置的话都是默认安装到c盘的，不仅仅是Python。那安装到c盘
- Pycharm 作为一款针对 Python 的编辑器，配置简单、功能强大、使用起来省时省心，对初学者友好，这也是为什么编程教室一直推荐新手使
- 经过一段时间的开发与测试,终于发布了Lms框架的第一个正式版本(1.0.0版本),并给出了lms框架的样例项目lms.samples。本文通
- 问题:python2.7 查询或者插入中文数据在mysql中的时候出现中文乱码---可能情况:1.mysql数据库各项没有设置编码,默认为&
- 背景由于阿里云oss，cdn消耗钱的速度比较快，在不知道的情况下，服务就被停了，影响比较大。所以想做个监控。百度一下阿里云账户余额 api
- 如果你经常与Excel或Word打交道，那么从两份表格/文档中找到不一样的元素是一件让人很头疼的工作，当然网上有很多方法、第三方软件教你如何
- 本文实例为大家分享了python实现简易聊天室的具体代码，供大家参考，具体内容如下群聊聊天室1.功能：类似qq群聊功能1.有人进入聊天室需要
- PDOStatement::rowCountPDOStatement::rowCount — 返回受上一个 SQL 语句影响的行数(PHP
- Update Scanner这个Firefox附加软件也是一种很好的选择。Update Scanner可以同时跟踪多个网页，并为不同的网页设
- 1. 简介（Introduction）官方原文本文翻译了原文并加入了自己的理解。主要介绍多个 Go协程之间对同一个变量并发读写时需要注意的同
- 一、为什么要使用Python进行数据分析？python拥有一个巨大的活跃的科学计算社区，拥有不断改良的库，能够轻松的集成C,C++,Fort
- (1)安装Jpype 用Python调用jar包需要安装jpype扩展，在Ubuntu上可以直接使用apt-get安装jpype扩展$ su
- 本文实例讲述了Django rest framework工具包简单用法。分享给大家供大家参考，具体如下：Django rest framew
- 前言这里存储过程和游标的定义和作用就不介绍了，网上挺多的，只通过简单的介绍，然后用个案例让大家快速了解。实例中会具体说明变量的定义，赋值，游
- 很简单的代码，记录一下。 import Image image =
- 代码'''数据集：Mnist训练集数量：60000(实际使用：10000)测试集数量：10000（实际使用：1000
- 当我们学习python的时候，总会用到一些常用的模块，接下来我就详细讲解下利用两种不同的方式画饼状图。首先利用【Tkinter】中的canv
