简介

jquery.accordion.js 是一款JQuery手风琴效果插件，适用于折叠的菜单，方便使用！用这款插件制作极其方便，只需要定义很少的参数，便可制作出纵向手风琴效果！

（下载的附件中附有DEMO）

使用

1.  引入 jquery.js 、jquery.dimensions.js 和 jquery.accordion.js 文件

2.  HTML

<div style="margin:0 auto;margin-top:50px;" >
<a>菜单一:</a>
<div>
<p>
You've seen it coming!

Buy now and get nothing for free!

Well, at least no free beer. Perhaps a bear,

if you can afford it.
</p>
</div>
<a>菜单二:</a>
<div>
<p>
your bear, you have to admit it!

No, we aren't selling bears.
</p>
</div>
<a>菜单三:</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

And now, for something completely different.

Period.
</p>
</div>
</div>

CSS
.basic  {
width: 260px;
font-family: verdana;
border: 1px solid black;
}
.basic div {
background-color: #eee;
}

.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;

background-image: url("AccordionTab0.gif");
}
.basic a:hover {
background-color: white;
background-image: url("AccordionTab2.gif");
}
.basic a.selected {
color: black;
background-color: #80cfe2;
background-image: url("AccordionTab2.gif");
}

3.  调用

<script type="text/javascript">
$().ready(function(){
$('.basic').accordion({
event: 'mouseover'
});
});
</script>

相关链接

在线演示 ：https://www.jq22.com/yanshi12671

GitHub 地址 ：https://github.com/webfactory/accordion