jQuery Collapse 實際執行畫面

jQuery Collapse 是一個輕量級的折疊式選單套件，看名稱就知道是基於 jQuery 框架所撰寫的套件，可支援 Cookie 的進行狀態保存功能，可以讓你的網站使用者記得且知道他上次使用的進度或者是換頁面的時候可以當成選單來記錄使用者的選擇。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//jQuery Collapse 的主程式碼
<script src="jquery.collapse.js"></script>


接下來HTML的部分
<div id="demo" data-collapse>
  <h2>標題</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>標題</h2>
  <div>
    <p>你可以放置任何你喜歡的網頁元素 這裡是用DIV來當範例</p>
  </div>
</div>

最後只要再加上 JavaScript
$(function(){
  $("#demo").collapse({
    //可加入參數
  });
});

可加入參數值

參數	預設	說明
show	function(){this.show();}	顯示前執行的函式
hide	function(){this.hide();}	隱藏前執行的函式
accordion	true	是否啟用手風琴的樣式
persist	true	是否紀錄

PS.這一個範例沒有包含HTML5紀錄的部分

作者網站：http://webcloud.se/code/jQuery-Collapse/
檔案大小：96.2 KB(包含範例)
檔案下載：https://github.com/danielstocks/jQuery-Collapse/
檔案備份：下載