DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實戰篇之收縮菜單表單布局
JS實戰篇之收縮菜單表單布局
編輯:關於JavaScript     

獲取節點的兩種方式:

    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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved