HoverAccordion 執行畫面

這是一個只需要滑鼠一滑過就能執行折疊操作的套件，執行建立在jQuery框架之下適合與其他套件做整合，jQuery HoverAccordion 應用方式簡潔套件主程式內容壓縮後大小僅3KB，有流量限制的網站也不會造成太大的負擔。

使用方法：
先是載入套件及框架主體
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//載入套件主程式 min 版本
<script src="hoveraccordion/jquery.hoveraccordion.min.js" type="text/javascript"></script>
再來編輯CSS的外觀部分
<style>
#accordion {
    margin:0;
    padding:0;
    width:300px;
    list-style-type:none;
    background-color:#FFFFFF;
    color:#000000;
    line-height:120%;
    height:300px;
}
#accordion a {
    display:block;
    font-weight:normal;
    text-decoration:none;
}
#accordion ul {
    overflow: hidden;
    margin:0;
    padding:0;
}
#accordion li {
    margin:0;
    padding:0;
    list-style-type:none;
}
#accordion li a {
    width:285px;
    padding:5px 0 0 15px;
    display:block;
    color:#000000;
    background-image:url(ha-header.jpg); /*選項按鈕的背景圖*/
    height:25px;
}
#accordion li a.closed {
    color:#000000 !important;
    background-image:url(ha-header.jpg) !important;/*選項按鈕的背景圖*/
}
#accordion li.firstitem a.closed {
    color:#000000 !important;
    background-image:url(ha-header-first.jpg) !important;/*選項按鈕的第一個有上圓弧的背景圖*/
}
#accordion li.lastitem a.closed {
    color:#000000 !important;
    background-image:url(ha-header-last.jpg) !important;/*選項按鈕的最後一個有下圓弧的背景圖*/
}
#accordion li li {
    border-left:1px solid #E5E5E5;
    border-right:1px solid #E5E5E5;
    padding:0 15px 0 15px;
    height:175px;
}
#accordion li a.opened {
    background-image:url(ha-header-active.jpg);
    color:#FFFFFF;
}
#accordion li.firstitem a.opened {
    background-image:url(ha-header-first-active.jpg);
    color:#FFFFFF;
}
#accordion li.lastitem li {
    margin-bottom:-4px;
}
#accordion li.lastitem ul {
    background-image:url(ha-footer.jpg);
    background-repeat:no-repeat;
    background-position:bottom;
    padding-bottom:4px;
}
</style>

HTML部分的排列方式
<ul id="accordion">
  <li>
    <a href="#">選項一的標題</a>
<ul>
 <li>選項一的內容</li>
    </ul>
  </li>
  <li>
    <a href="#">選項二的標題</a>
<ul>
 <li>選項二的內容</li>
    </ul>
  </li>
  <li>
    <a href="#">選項三的標題</a>
<ul>
 <li>選項三的內容</li>
    </ul>
  </li>
  <li>
    <a href="#">選項四的標題</a>
<ul>
 <li>選項四的內容</li>
    </ul>
  </li>
</ul>

最後執行的程式部分
<script language="javascript">
$(function(){
   $('#accordion').hoverAccordion({
      keepHeight: true,
      activateItem: 3,
      speed: 'fast' //速度 下方會說明可供修改的參數
   });
});
</script>

附上 此套件可供修改的參數

參數	說明
speed	滑動的速度可設定為 slow(慢),normal(正常),fast(快)或者是輸入數字單位為毫秒,預設為fast
activateItem	自動激活物件可活動,或可設定為數字,表示第幾個物件是觸發活動的物件,預設為 true
keepHeight	設定每個選單的高度,true高度都以最高的基準,false個別高度預設為false
onClickOnly	設定滑鼠滑過或按下才展開,true為按下false為滑過.預設為false
classActive	CSS 的 Active class name 預設為 active
classHeader	CSS 的 Header class name 預設為 header
classHover	CSS 的 Hover class name 預設為 hover
classOpen	CSS 的 Open class name 預設為 opened
classClosed	CSS 的 Close class name 預設為 closed

作者網站：http://berndmatzner.de/jquery/hoveraccordion/
檔案大小：3 KB
檔案下載：http://berndmatzner.de/jquery/hoveraccordion/jquery.hoveraccordion.min.js
檔案備份：下載