基于jQuery的简单手风琴特效

手风琴的效果在工程中是一种高频效应。在本文中，示例J告诉我们jQuery实现了一个简单的手风琴特效代码，供大家参考：

运行效果的截图如下：
具体代码如下：

css样式

CSS文档
{体
保证金：0汽车；
填充：0自动；
字体大小：9pt；
微软雅黑字体，字体：，Arial，Verdana，无衬线字体Helvetica；
}
{。手风琴
左：0px填充；
}
手风琴李{
边境上：1px solid # 000；
列表样式类型：无；
}
{。titlemenu
宽度：100%；
身高：30px；
背景颜色：# f2f2f2；
填料：5px 0px；
文本对齐：左对齐；
光标：指针；
}
titlemenu { IMG。
职位：相对；
左：20px；
上图：5px；
}
titlemenu {跨度。
显示：内联块；
职位：相对；
左：40px；
}
{。
文本对齐：左对齐；
宽度：100%；
左：0px填充；
}
{子李。
列表样式类型：无；
宽度：100%；
}
img {子菜单里。
职位：相对；
左：20px；
上图：5px；
}
{子李。
职位：相对；
左：40px；
上图：5px；
文字装饰：无；
}
子菜单里跨{。
显示：内联块；
身高：30px；
填料：5px 0px；
}
{。徘徊
背景颜色：# 4a5b79；
}
自定义js

（函数（$）{）
钢琴=函数（）{
_menu ={ {标题：一个目录
返回
初始化：功能（obj）{
_menu = eval（'（' + _menu +）；
Var Li =；
美元。每个（_menu，函数（指数、元）{
李+ = + +element.title；
如果（element.submenu！= null）
{
李+=；
美元。每个（element.submenu，功能（IND，ELE）{
李+ = + +ele.title；
}）；
李+=；
}
李+=；
}）；
Obj.append（Li）；
}
}
}

美元。fn.accordion =功能（选项）{
新钢琴（）；
pia.init（$（this））；
返回this.each（函数（）{（）
VaR ACCS =美元（这个）孩子（李）；
accs.each（复位）；
Accs.click（onclick）；
无功menu_li = $（。子菜单）。儿童（李）；
menu_li.each（函数（指数、元）{
$（这）。Mousemove（function（e）{
$（这），兄弟姐妹（）。RemoveClass（悬停）；
$（this）。find（）。Css（）
$（这个）。兄弟姐妹（）。find（）。Css（）
$（这）。AddClass（悬停）；
}）；
}）；
}）；
}

函数onClick（）{
$（这），兄弟姐妹（李的）。找到（UL）。每个（隐藏）；
$（这）找到（UL）。SlideDown（正常）；
返回false；
}

函数隐藏（）{
$（这）SlideUp（正常）；
}

函数重置（）{
$（这个）。查找（）。隐藏（）；
}
}（jQuery）；
HTML调用
非所有权文件

$（函数（）{（））
$（#手风琴手风琴（））；
}）；

我希望这篇文章对大家学习jQuery编程很有帮助，并且更熟练掌握手风琴效果。下面有链接相关文章的文章，希望大家能阅读和学习。