亲宝软件园·资讯

展开

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

AllSight 人气:0

获取节点的两种方式:

    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)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗<https://img.qb5200.com/download-x/dt>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
    <dd>今天天气好晴朗<https://img.qb5200.com/download-x/dd>
  <https://img.qb5200.com/download-x/dl>
</body>
</html>

加载全部内容

相关教程
猜你喜欢
用户评论