jQuery滑动展开收缩手风琴代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery滑动展开收缩手风琴代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<title>jQuery滑动展开收缩手风琴代码</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="woco.accordion.min.js"></script>
<link href="woco-accordion.min.css" rel="stylesheet">
<style>
	body
	{
		font-family: sans-serif;
	}
	.accordion
	{
		max-width: 300px;
		margin: 5px auto;
	}
</style>
</head>
<body>
<div class="accordion">
	<h1>内容 1</h1>
	<div>
		内容 1<br>内容 1<br>内容 1<br>内容 1<br>
	</div>
	<h1>内容 2</h1>
	<div>
		内容 2<br>内容 2<br>内容 2<br>内容 2<br>
	</div>
	<h1>内容 3</h1>
	<div>
		内容 3<br>内容 3<br>内容 3<br>内容 3<br>
	</div>
</div>
<script>
	$(".accordion").accordion();
</script>
</body>
</html>

JS代码(woco.accordion.min.js):

(function($){
	$.fn.accordion=function(options){
	return this.each(function(){
	var settings=$.extend({
	multiExpand:false,slideSpeed:500,dropDownIcon:'&#9660'}
,options);
	$(this).children("h1").each(function(){
	$(this).next('div').andSelf().wrapAll("<div class='accordion-item'></div>");
}
);
	$(this).children().children('div').addClass("accordion-content");
	$(this).find("h1").wrap("<div class='accordion-header'></div>");
	$(this).find("h1").after("<div class='accordion-header-icon'>"+settings.dropDownIcon+"</div>");
	$(this).children('.accordion-item').wrap('<div class="drawer"></div>');
	$(this).find(".accordion-header").click(function(){
	if(settings.multiExpand==false){
	if(!$(this).hasClass('accordion-header-active')){
	$(this).parent().parent().parent().find(".accordion-header-active").removeClass('accordion-header-active');
	$(this).parent().parent().parent().find(".accordion-item-active").children(".accordion-content").slideUp(settings.slideSpeed);
	$(this).parent().parent().parent().find(".accordion-header-icon-active").removeClass("accordion-header-icon-active");
	$(this).parent().parent().parent().find(".accordion-item-active").removeClass("accordion-item-active");
}
}
$(this).toggleClass("accordion-header-active");
	$(this).parent().toggleClass("accordion-item-active");
	$(this).next().slideToggle(settings.slideSpeed);
	$(this).children(".accordion-header-icon").toggleClass("accordion-header-icon-active");
}
);
}
);
}
}
(jQuery));

CSS代码(woco-accordion.min.css):

.drawer{width:100%;border-top:1px solid #E0E0E0;border-radius:3px;}
.accordion-item{border-bottom:1px solid #E0E0E0;}
.accordion-item-active .accordion-header{background:#888;transition:.25s;}
.accordion-item-active .accordion-header-icon{color:#fff;}
.accordion-item-active .accordion-header h1{color:#fff;}
.accordion-header{background:#f2f2f2;padding:12px;cursor:pointer;border-right:1px solid #E0E0E0;border-left:1px solid #E0E0E0;min-height:20px;transition:.25s;}
.accordion-header h1{float:left;font-size:18px;font-weight:normal;margin:0;line-height:1.3em;color:#212121;}
.accordion-content{border-left:1px solid #E0E0E0;border-right:1px solid #E0E0E0;border-top:1px solid #E0E0E0;display:none;padding:12px;color:#212121;background:#FFF;font-size:15px;line-height:1.45em;}
.accordion-content p{margin:0;margin-bottom:3px;}
.accordion-header-icon{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;float:right;color:#888;font-size:15px;vertical-align:middle;}
.accordion-header-icon.accordion-header-icon-active{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)