用JavaScript和CSS實現頁面部分内容折疊顯示

　　在頁面内容很多、顯示太長的情況下，除了分頁顯示以外，也可以采取折疊的方式，在網上搜了一些資料，一般都是采取JavaScript加CSS的方式來實現的，不過有些示範過于簡單，有些效果過于複雜，要适合我們自己還得自己改改，經過調試基本上實現了我們需要的效果，記錄如下。

　　在頁面head或者body部分先加入下面的JavaScript代碼：

<script type='text/javascript'>
  function isHidden(oDiv) {
    var vDiv = document.getElementById(oDiv);//div id用于折疊主體
    vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';//反轉
    var oDiv1 = oDiv + '1';
    var vDiv1 = document.getElementById(oDiv1);//div id1用于折疊狀态顯示展開的+号
    vDiv1.style.display = (vDiv1.style.display == 'none')?'block':'none';//反轉
    var oDiv2 = oDiv + '2';
    var vDiv2 = document.getElementById(oDiv2);//div id2用于展開狀态顯示折疊的-号
    vDiv2.style.display = (vDiv2.style.display == 'none')?'block':'none';//反轉
  }
</script>

　　再在需要折疊的區域設置div，可以默認為折疊或者展開狀态：

<fieldset>
  <legend style="cursor:hand" onclick="isHidden('div_first_part')">
    第一塊（默認展開）标題
    <span style='float:right; display:none;' id='div_first_part1'>+&nbsp</span>
    <span style='float:right; display:block;' id='div_first_part2'>-&nbsp</span>
  </legend>
  <div style='display:block;' id='div_first_part'>
    <ul>
      <li>第一塊 第一行</li>
      <li>第一塊 第二行</li>
      <li>第一塊 第三行</li>
      <li>第一塊 第四行</li>
      <li>第一塊 第五行</li>
    </ul>
  </div>
</fieldset>

<fieldset>
  <legend style="cursor:hand" onclick="isHidden('div_second_part')">
    第二塊（默認折疊）标題
    <span style='float:right; display:block;' id='div_second_part1'>+&nbsp</span>
    <span style='float:right; display:none;' id='div_second_part2'>-&nbsp</span>
  </legend>
  <div style='display:none;' id='div_second_part'>
    <ul>
      <li>第二塊 第一行</li>
      <li>第二塊 第二行</li>
      <li>第二塊 第三行</li>
      <li>第二塊 第四行</li>
      <li>第二塊 第五行</li>
    </ul>
  </div>
</fieldset>

　　效果如下，其中第一塊是默認展開狀态，第二塊是默認折疊狀态，點擊每一塊的标題行可以切換狀态：

function isHidden(oDiv) { var vDiv = document.getElementById(oDiv);//div id用于折疊主體 vDiv.style.display = (vDiv.style.display == 'none')?'block':'none';//反轉 var oDiv1 = oDiv + '1'; var vDiv1 = document.getElementById(oDiv1);//div id1用于折疊狀态顯示展開的+号 vDiv1.style.display = (vDiv1.style.display == 'none')?'block':'none';//反轉 var oDiv2 = oDiv + '2'; var vDiv2 = document.getElementById(oDiv2);//div id2用于展開狀态顯示折疊的-号 vDiv2.style.display = (vDiv2.style.display == 'none')?'block':'none';//反轉 }

第一塊（默認展開）标題 +&nbsp -&nbsp

• 第一塊 第一行
• 第一塊 第二行
• 第一塊 第三行
• 第一塊 第四行
• 第一塊 第五行

第二塊（默認折疊）标題 +&nbsp -&nbsp

• 第二塊 第一行
• 第二塊 第二行
• 第二塊 第三行
• 第二塊 第四行
• 第二塊 第五行

　　還可以增加更多塊。

评论

您的名字

评论

關於文字格式

Plain text

• 不允許使用 HTML 標籤。
• 網頁和電子郵件地址自動轉換為連結。
• 自動斷行和分段。

CAPTCHA

此问题用于测试您是否是人类访问者并防止自动提交垃圾信息。