1、外掛程式代碼
少說多做， 基於jQuery的手風琴外掛程式jquery.accordion.js的代碼：
/* * 手風琴外掛程式說明： * 1、treeTrunk對應樹幹 * 2、treeLeaf對應樹葉， html代碼結構一般為treeTrunk.next元素 * 3、treeTrunkActiveClass是樹幹展開後添加的樣式 * 4、treeType是觸發手風琴效果的事件形式 * 5、treeIs 載入後是否將第一個樹幹展開 * 6、speed 展開、閉合動畫執行時間 * 7、外掛程式命名為jquery.accordion.js */;(function($) { $.fn.accordion = function(options) { //外掛程式預設值 var defaultVal = { treeTrunk: 'a', //樹幹--點擊需要展開的元素 treeLeaf: 'ul', //樹葉--點擊展開元素後顯示的內容 treeTrunkActiveClass: 'active', //當前樹幹--當前展開樹幹元素的添加的樣式 treeType: 'click', //觸發展開/關閉的事件類型：click,mouseenter,mouseleave,mouseout,mouseover treeIs: true, //頁面載入後是否顯示第一個樹幹的樹葉內容 speed:500//動畫執行時間 }; var obj = $.extend(defaultVal, options); //合併參數 return this.each(function { var selObject = $(this); //獲取觸發手風琴事件物件 var selTreeTrunk = selObject.find(obj.treeTrunk); //獲取當前物件下的樹幹元素 var selTreeLeaf = selTreeTrunk.next(obj.treeLeaf); //獲取當前物件下的樹幹元素下的樹葉 //綁定事件 selTreeTrunk.bind(obj.treeType, function { //判斷樹葉是否顯示 if($(this).next(selTreeLeaf).is(':visible')) { //關閉樹葉 $(this).next(selTreeLeaf).slideUp(obj.speed); //移除active樣式 $(this).removeClass(obj.treeTrunkActiveClass); } else { //所有樹幹移除移除active樣式 selTreeTrunk.removeClass(obj.treeTrunkActiveClass); //當前樹幹添加active樣式 $(this).addClass(obj.treeTrunkActiveClass); //所有樹葉閉合 selTreeTrunk.next(selTreeLeaf).slideUp(obj.speed); //當前樹幹下的樹葉展開 $(this).next(selTreeLeaf).slideDown(obj.speed); } }); //頁面載入後觸發第一個樹幹顯示樹葉內容 if(obj.treeIs) { selTreeTrunk.eq(0).trigger(obj.treeType); } }); }})(jQuery);2、外掛程式使用
說明：
（1）、jquery.accordion.js外掛程式的路徑要配置對。
（2）、可以自己編輯頁面的展示樣式， 如active樣式。
3、展示效果：
請直接運行上述代碼查看外掛程式效果。