首页 > 编程 > JavaScript > 正文

JS实战篇之收缩菜单表单布局

2019-11-19 18:35:11
字体:
来源:转载
供稿:网友

获取节点的两种方式:

    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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表