获取节点的两种方式:

    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>

标签:
js,表单布局

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“JS实战篇之收缩菜单表单布局”
暂无“JS实战篇之收缩菜单表单布局”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?