【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，转载请注明。