手风琴折叠效果

CSS代码

/* '加号'折叠样式 */ .accordion { margin-bottom: 3px; } .accordion h4 { clear: both; cursor: hand; color: #8B0000; font-size: 12px; font-weight:bold; text-align: left; margin-top: 6px; margin-bottom: 6px; padding-left: 18Px; background: transparent url(../images/plus.gif) no-repeat 2px; } .accordion h4.active { background: transparent url(../images/minus.gif) no-repeat 2px; } .accordion-body { clear: both; height: auto; padding-top: 2px; padding-bottom: 2px; margin-top: 0px; margin-left: 2px; margin-right: 2px; margin-bottom: 6px; border: solid 1px #6e8bde; border-top: 0 none; }

 

JS代码

$(".accordion h4:first").addClass("active"); $(".accordion div:not(:first)").hide(); $(".accordion h4").click(function(){ $(this).next("div").slideToggle("fast").siblings("div:visible").slideUp("fast"); $(this).toggleClass("active"); $(this).siblings("h4").removeClass("active"); });

 

HTML代码

<div class="accordion"> <h4 class="active">抱怨管理</h4> <ul> <li><a href="#" mce_href="#">抱怨列表</a></li> <li><a href="#" mce_href="#">新建抱怨</a></li> <li><a href="#" mce_href="#">抱怨查询</a></li> </ul> <h4>系统管理</h4> <ul> <li><a href="#" mce_href="#">压缩机型号</a></li> <li><a href="#" mce_href="#">失效模式</a></li> <li><a href="#" mce_href="#">修改密码</a></li> <li><a href="#" mce_href="#">退出系统</a></li> </ul> </div>