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

【HUI】AccordionMenu 手风琴菜单(基于jQuery)相关推荐

HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码
jQuery 1.3.2 简单实现select二级联动 jQuery 二级联动 $(document).ready(function(){ $("#province").chang ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览源码下载实现的代码. ...
基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
手风琴html例子,jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: dd').hide(); $('.accordion > dt > a').click(f ...
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单一个创建右击菜单的插件,简洁且易用. 源 ...
基于jQuery的鼠标右键菜单
对于自制的鼠标右键功能,我们应该考虑哪些因素呢? 一.涉及因素 1.阻止默认鼠标右键事件. 3.右键事件,使菜单出现. 2.考虑右键菜单出现的位置,是否超出窗口. 4.点击窗口任意位置,菜单消失. 二 ...

【HUI】AccordionMenu 手风琴菜单(基于jQuery)

【HUI】AccordionMenu 手风琴菜单(基于jQuery)相关推荐

最新文章

热门文章