【HUI】AccordionMenu 手風琴菜單(基於jQuery)

文章來自LearnShare，轉載請註明。

分享自己寫的基於jQuery的手風琴菜單，包括橫向和縱向兩種，會不斷豐富它的功能，方便自己和大家使用。

Updates：

————————————————————————————————————————————————————————————

@2012-12-12 version 0.3

加入了可選的菜單行爲互斥，即菜單項不同時展開。通過“mutex”變量指定。效果預覽：縱向v3

————————————————————————————————————————————————————————————

@2012-12-10 version 0.2

加入了可選的子菜單動畫效果，通過“animation”變量指定，也可擴展自定義動畫。效果預覽：縱向v2

————————————————————————————————————————————————————————————

@2012-12-05 version 0.1

AccordionMenu的子菜單可以通過點擊展開或關閉。

————————————————————————————————————————————————————————————

最早接觸的手風琴菜單應該是QQ Player的設置界面，這個組件可以將無法一次性展示的菜單項或內容摺疊起來，有利於菜單分組和內容的展示。

初次動手編寫手風琴菜單是在今年的暑期實習，項目是教學使用的網站，需要分章節展示內容，所以將側邊欄做成了目錄導航菜單，使用了三級目錄將數百項菜單摺疊爲章節篇三層，並使用jQuery的動畫效果延遲章節展開收縮的動作，整體效果很不錯。（本文將在最後的部分編寫一個類似的菜單）

HTML主要代碼：

<!-- 
* Widget: HUI.AccordionMenu
* Version: 0.1 V (@2012-12-05)
* Author: H-Labs (LearnShare)
* 
* 
 -->

<div id="menu">
	<div class="menu-item">
		<div class="item-title">item 1</div>
		<div class="item-content">content1</div>
	</div>
	<div class="menu-item">
		<div class="item-title">item 2</div>
		<div class="item-content">content2</div>
	</div>
	<div class="menu-item">
		<div class="item-title">item 3</div>
		<div class="item-content">content3</div>
	</div>
</div>

<div id="menu">...</div> 部分是整個菜單；

<div class="menu-item">...</div> 部分是菜單項（首層）。在class中添加open屬性，可使該項默認展開；

<div class="item-title">...</div> 部分是菜單標題部分；

<div class="item-content">...</div> 是菜單內容部分。

CSS代碼省略

JS代碼：

/**
* Widget: HUI.AccordionMenu
* Version: 0.3 V (@2012-12-12)
* Author: H-Labs (LearnShare)
*/

var animation="slide"; // 設置摺疊動畫：none 無動畫;slide 滑動;fade 淡入淡出
var mutex=1; // 設置菜單行爲關係：0 無關;1 互斥(不同時展開)

$(document).ready(function(){
	initMenus();
	bindMenus();
});
/* 
* 初始化菜單狀態，將所有class包含open的項目顯示出來
*/
function initMenus(){
	$(".item-content").each(function(){
		if($(this).parent().hasClass("open")){
			$(this).show();
		}else{
			$(this).hide();
		}
	});
}
/* 
* 監視點擊事件，執行顯示或隱藏動作並設定或取消open狀態
*/
function bindMenus(){
	$(".item-title").bind("click",function(){
		var item=$(this).parent();
		if(item.hasClass("open")){
			hideItem($(this).next());
			hideAllItems();
			if(!mutex){
				item.removeClass("open");
			}
		}else{
			hideAllItems();
			showItem($(this).next());
			item.addClass("open");
		}
	});
}
/*
* 摺疊所有已展開菜單項
*/
function hideAllItems(){
	if(mutex){
		$(".menu-item").each(function(){
			if($(this).hasClass("open")){
				hideItem($(this).find(".item-content"));
				$(this).removeClass("open");
			}
		});
	}
}
/*
* 摺疊菜單項
*/
function hideItem(item){
	switch(animation){
		case "slide":
			item.slideUp();
			break;
		case "fade":
			item.fadeOut();
			break;
		default:
			item.hide();
			break;
	}
}
/*
* 展開菜單項
*/
function showItem(item){
	switch(animation){
		case "slide":
			item.slideDown();
			break;
		case "fade":
			item.fadeIn();
			break;
		default:
			item.show();
			break;
	}
}

效果預覽：

1.縱向v1

2.橫向v1

文章來自LearnShare，轉載請註明。