JS實戰(zhàn)篇之收縮菜單表單布局

更新時間：2016年12月10日 08:49:10 作者：AllSight

這篇文章主要介紹了JS實戰(zhàn)篇之收縮菜單表單布局的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

獲取節(jié)點(diǎn)的兩種方式：

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){
          /*判斷當(dāng)前標(biāo)題是展開還是關(guān)閉狀態(tài)，默認(rèn)關(guān)閉，先執(zhí)行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>
  <!-- 獲取節(jié)點(diǎn)的兩種方式：
  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>

您可能感興趣的文章: