jQuery collapser 實際執行畫面

jQuery collapser 是一個多用途的折疊式選單，可用於展開和收起網頁元素。可利用此套件來建立 Accordion、List Collapser 等等功能。輕量簡單而且快速，可以折疊 HTML 內任何的元素，可自定位元素開啟前後皆有回調函數可用。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
//jQuery collapser 的主程式碼
<script src="/resources/js/jquery.collapser.js" type="text/javascript"></script>

第二步 寫入 HTML 的選單元素
<!-- Demo 6 -->
<h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<!-- Demo 7 -->
<ul>
<a href="#" class="demo7">Collapse List</a>
<li>List 1</li>
<li>List 2
 <ul>
   <a href="#" class="demo7">Collapse List</a>
   <li>Sub List 1</li>
   <li>Sub list 2</li>
   <li>Sub list 3
 <ul>
   <a href="#" class="demo7">Collapse List</a>
 <li>Sub sub List 1</li>
 <li>Sub sub List 2</li>
 <li>Sub sub List 3</li>
 </ul>
</li>
      </ul>
</li>
<li>List 3 </li>
<li>List 4 </li>
</ul>

第三步 寫入 CSS 設計樣式
.expArrow{
padding-left: 20px;
background: url(images/arrow-down.png) no-repeat 0px 4px;
}
.collArrow{
padding-left: 20px;
background: url(images/arrow-up.png) no-repeat 0px 4px;
}
.expIco{
padding-left: 20px;
background: url(images/plus.gif) no-repeat 0px 4px;
}
.collIco{
padding-left: 20px;
background: url(images/minus.gif) no-repeat 0px 4px;
}
.demo6{
border: 1px solid #B9E3FF;
background: #0099FF;
padding-left: 5px;
color: #FFFFFF;
}
.panel{
border: 1px solid #B9E3FF;
padding: 10px;
}

第四步 寫入 JavaScript 程式碼
$(function(){
    $('.panel').hide();
    $('.demo6').collapser({
        target: 'next',
        effect: 'slide',
        changeText: 0,
        expandClass: 'expIco',
        collapseClass: 'collIco'
    }, function(){
        $('.panel').slideUp();
    });
    $('.demo7').collapser({
        target: 'siblings',
        effect: 'slide',
        expandHtml: 'Expand List',
        collapseHtml: 'Collapse List',
        expandClass: 'expArrow',
        collapseClass: 'collArrow'
    });
});

附上參數說明

$('Element selector').collapser({
 target: 'next',//目標元素
        //可接受值為 next,prev,siblings
        //分別為 下一個元素,上一個元素,範圍內所有元素
 targetOnly: null, //指定元素
        //當 target 為 next,prev 才有效
 effect: 'slide', //動畫效果 slide,fade
 changeText: true,//是否允許修改內文
 expandHtml: 'Expand',//收起的標題內容
 collapseHtml: 'Collapse',//展開的標題內容
 expandClass: '',//收起的 Class 名稱
 collapseClass:''//展開的 Class 名稱
}, 開啟前回調函數, 開啟前回調函數);

作者網站：http://www.aakashweb.com/jquery-plugins/collapser/
檔案大小：3.4 KB
檔案下載：http://www.aakashweb.com/resources/downloads/jquery.collapser.zip
檔案備份：下載