使用jQuery开发accordion手风琴插件

一、插件效果

手风琴插件常用的功能均已实现，包括：手风琴菜单项的折叠展开效果、选中指定菜单项、判断菜单项是否选中等。

效果如下：

　　

二、插件内部HTML元素结构

 <!-- accordioon组件 -->
 <ul class="accordion">
     <li accordion-id="menu1" class="active">插件使用</li>
     <li>
         <ul>
             <li><a href="javascript:;">选项卡插件</a></li>
             <li><a href="javascript:;">手风琴插件</a></li>
         </ul>
     </li>
     <li accordion-id="menu2">管理员管理</li>
     <li>
         <ul>
             <li><a href="javascript:;">管理员查看</a></li>
             <li><a href="javascript:;">管理员添加</a></li>
             <li><a href="javascript:;">管理员修改</a></li>
         </ul>
     </li>
     <li accordion-id="menu3">用户管理</li>
     <li>
         <ul>
             <li><a href="javascript:;">用户查看</a></li>
             <li><a href="javascript:;">用户添加</a></li>
             <li><a href="javascript:;">用户修改</a></li>
         </ul>
     </li>
 </ul>
 <!-- accordioon组件 END -->

插件主体是一个<ul>列表，里面的奇数<li>为菜单项标题，偶数<li>是菜单项内容，标题<li>被点击时会判断它是否已经选中了，如果没有选中，会把该菜单项选中，打开内容面板，同时关闭其余的菜单项。

菜单项内容里面又是一个<ul>列表，每一个<li>都包含一个<a>标签，在我们的例子中<a>标签的单击事件是向右侧的tab里面添加一个选项卡。

三、样式

 /* 手风琴样式 */
 .accordion {margin: 5px;font-size: 14px;}
 /* 链接样式 */
 .accordion a {color: #333333;text-decoration: none;}
 .accordion a:hover {color: #c81623;}
 /* 菜单标题样式 */
 .accordion .accordion-title {margin: 5px 0;padding: 5px;height: 25px;line-height: 25px;background: #dddddd;border-radius: 5px;cursor: pointer;}
 .accordion .accordion-title:hover {font-weight: bold;}
 /* 菜单面板样式 */
 .accordion .accordion-body {padding-left: 10px;background: white;}

四、主要功能函数

1、初始化插件样式和事件

 /**
  * 初始化accordion组件
  * @param {Object} $accordion
  */
 function init($accordion) {
     $accordion
         .children("li:even").addClass("accordion-title").end()
         .children("li:odd").addClass("accordion-body")
         .css("display", "none").eq(0)
         .css("display", "list-item");
 }
 
 /**
  * 绑定事件
  * @param {Object} $accordion
  */
 function initEvents($accordion) {
     $accordion.delegate(".accordion-title", "click", function() {
         // 为菜单title添加样式
         $(this).addClass("active").siblings(".accordion-title").removeClass("active");
         // 调用select选中指定菜单
         select($accordion, $(this).attr("accordion-id"));
     });
 }

2、选中指定菜单

 /**
  * 选中指定菜单
  * @param {Object} $accordion
  * @param {Object} accordionId
  */
 function select($accordion, accordionId) {
     // 面板动画切换
     $accordion.children("li[accordion-id=" + accordionId + "]").next().slideDown('100').siblings('.accordion-body').slideUp('100');
 }

3、判断指定菜单是否选中

 /**
  * 判断指定菜单是否选中
  * @param {Object} $accordion
  * @param {Object} accordionId
  */
 function isSelected($accordion, accordionId) {
     // 通过菜单title是否有active样式来判断
     return $accordion.children("li[accordion-id=" + accordionId + "]").hasClass("active");
 }

4、插件扩展函数

 $.fn.accordion = function(options, param) {
 
     // 保存对象
     var accordion = $(this);
 
     if (typeof options == 'string') {
         switch(options){
             case 'select':
                 return select(accordion, param);
             case 'isSelected':
                 return isSelected(accordion, param);
         }
     }
 
     options = options || {};
 
     return this.each(function() {
         // 初始化组件
         init(accordion);
         // 绑定事件
         initEvents(accordion);
     });
 };

五、源码下载

https://github.com/xuguofeng/jq-ui