Accordion Menu 折疊式選單

Accordion Menu 折疊式選單，在這一個折疊式選單中標題的部分是使用 H3 的網頁標籤，展開的內容子標題是採用 ul 和 li 的網頁標籤組成。一個 CSS 的類別動態的添加到這一個表單當中。標題 H3 標籤點擊來做摺疊選單的開 / 合的動作，一個選單開啟後會關閉其他之前開啟的選單項目。

使用方法：
第一步 載入程式許要使用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Accordion Menu 折疊式選單的主程式碼-->
<script type="text/javascript" src="ddaccordion.js"></script>

第二步 寫入 HTML 選單內容
<div class="arrowlistmenu">
    <h3 class="menuheader expandable">標題</h3>
    <ul class="categoryitems">
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
    </ul>
    <h3 class="menuheader expandable">標題</h3>
    <ul class="categoryitems">
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
    </ul>
    <h3 class="menuheader expandable">標題</h3>
    <ul class="categoryitems">
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
        <li><a href="連結">子標題</a></li>
    </ul>
    <h3 class="menuheader" style="cursor: default">標題</h3>
    <div>
     顯示在最底下的內容
    </div>
</div>

第三步 為選單設計 CSS 樣式
.arrowlistmenu{
width: 180px;
}
.arrowlistmenu .menuheader{
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px;
text-transform: uppercase;
padding: 4px 0 4px 10px;
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{
background-image: url(titlebar-active.png);
}
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px;
}
.arrowlistmenu ul li{
padding-bottom: 2px;
}
.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left;
display: block;
padding: 2px 0;
padding-left: 19px;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}
.arrowlistmenu ul li a:hover{
color: #A70303;
background-color: #F3F3F3;
}

第四步 寫入 JavaScript 程式碼片段
ddaccordion.init({
headerclass: "expandable", //共享的 CSS 類別名稱
contentclass: "categoryitems", //內容項目的類別名稱
revealtype: "click", //顯示內容的使用方式可設定為 click(點擊),clickgo(雙擊),mouseover(滑過)
mouseoverdelay: 200, //展開延遲秒數以毫秒為單位
collapseprev: true, //是否收合之前展開的內容
defaultexpanded: [0], //預設展開內容
onemustopen: false, //是否一定需要有一個展開的內容
animatedefault: false, //是否為預設動畫
persiststate: true, //是否在瀏覽器中打開
toggleclass: ["", "openheader"], //類別名稱開啟關閉的表頭
togglehtml: ["prefix", "", ""], //添加額外的HTML到表頭內容
animatespeed: "fast", //動畫速度可設定為fast,normal,slow或者數字 單位為毫秒
oninit:function(headers, expandedindices){ //讀取完成後執行
//執行程式碼
},
onopenclose:function(header, index, state, isuseractivated){ //開啟選單執行
//執行程式碼
}
});

作者網站：http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
檔案大小：4.83 KB
檔案下載：http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js
檔案備份：下載