JS实战篇之收缩菜单表单布局
作者：AllSight 时间：2024-04-18 09:47:43
获取节点的两种方式：
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
标签：js,表单,布局
0
投稿猜你喜欢
python识别验证码的思路及解决方案
2022-02-02 16:05:13
简化ADO数据库操作的控件（带分页功能）
2008-05-20 13:15:00
js 创建一个浮动div的代码
2024-04-10 14:02:55
python和php哪个容易学
2024-05-05 09:31:52
Vue+Java+Base64实现条码解析的示例
2024-05-02 17:08:27
MySQL下海量数据的迁移步骤分享
2024-01-16 13:13:10
微信小程序转发事件实现解析
2023-08-15 04:02:00
python使用建议与技巧分享（一）
2023-07-25 05:45:52
Python编程使用NLTK进行自然语言处理详解
2022-07-05 11:47:06
ASP + XML + JavaScript 实现动态无限级联动菜单
2008-06-13 06:31:00
XML文件的显示——CSS和XSL
2007-10-15 18:48:00
python3 简单实现组合设计模式
2023-06-12 19:15:50
python 特有语法推导式的基本使用
2023-06-25 01:39:58
JavaScript 浮动定位提示效果实现代码第1/2页
2023-07-22 23:26:19
Python实现发送与接收邮件的方法详解
2023-04-05 04:48:43
php生成4位数字验证码的实现代码
2023-11-20 15:00:12
Gregarius中文日期格式问题解决办法
2023-11-18 09:51:00
Python在线运行代码助手
2022-05-04 04:09:21
javascript中的throttle和debounce浅析
2024-05-08 10:10:27
python xlsxwriter库生成图表的应用示例
2022-03-02 20:01:33
