纵向折叠jquery手风琴特效代码

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

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

以下是纵向折叠jquery手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<meta name="author" content="Mobify">
<title>纵向折叠jquery手风琴特效</title>
<link rel="stylesheet" href="css/bellows.min.css">
<link rel="stylesheet" href="css/bellows-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="-bellows">

<div class="viewport">
	<div class="main-content">
		<h2 id="demo">Demo</h2>
		<div class="bellows">
			<div class="bellows__item bellows--is-open">
				<div class="bellows__header">
					<h3>Tab 1</h3>
				</div>
				<div class="bellows__content">
					<p>Lorem honeyed locusts sit amet, none so wise, sed do eiusmod 
					never resting ut labore et dolore magna aliqua. Manhood death 
					before disgrace warrior, feed it to the goats spare me your 
					false courtesy commodo consequat. Mace aute irure dolor in reprehenderit 
					poison is a woman&#39;s weapon lord of light tower dwarf. The last 
					of the dragons royal, godswood garron sister betrothed officia 
					deserunt mollit anim id est snow.</p>
				</div>
			</div>
			<div class="bellows__item">
				<div class="bellows__header">
					<h3>Tab 2</h3>
				</div>
				<div class="bellows__content">
					<p>Lorem honeyed locusts sit amet, none so wise, sed do eiusmod 
					never resting ut labore et dolore magna aliqua. Manhood death 
					before disgrace warrior, feed it to the goats spare me your 
					false courtesy commodo consequat. Mace aute irure dolor in reprehenderit 
					poison is a woman&#39;s weapon lord of light tower dwarf. The last 
					of the dragons royal, godswood garron sister betrothed officia 
					deserunt mollit anim id est snow.</p>
				</div>
			</div>
			<div class="bellows__item">
				<div class="bellows__header">
					<h3>Tab 3</h3>
				</div>
				<div class="bellows__content">
					<p>Lorem honeyed locusts sit amet, none so wise, sed do eiusmod 
					never resting ut labore et dolore magna aliqua. Manhood death 
					before disgrace warrior, feed it to the goats spare me your 
					false courtesy commodo consequat. Mace aute irure dolor in reprehenderit 
					poison is a woman&#39;s weapon lord of light tower dwarf. The last 
					of the dragons royal, godswood garron sister betrothed officia 
					deserunt mollit anim id est snow.</p>
				</div>
			</div>
			<div class="bellows__item">
				<div class="bellows__header">
					<h3>Tab 4</h3>
				</div>
				<div class="bellows__content">
					<p>Lorem honeyed locusts sit amet, none so wise, sed do eiusmod 
					never resting ut labore et dolore magna aliqua. Manhood death 
					before disgrace warrior, feed it to the goats spare me your 
					false courtesy commodo consequat. Mace aute irure dolor in reprehenderit 
					poison is a woman&#39;s weapon lord of light tower dwarf. The last 
					of the dragons royal, godswood garron sister betrothed officia 
					deserunt mollit anim id est snow.</p>
				</div>
			</div>
		</div>
		<!-- JavaScript -->
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/highlight.pack.js"></script>
		<script src="js/velocity.min.js"></script>
		<script src="js/bellows.min.js"></script>
		<script>
			$(function(){
			$('.bellows').bellows();
			 });
		</script>
	</div>
</div>
</body>
</html>

JS代码(bellows.min.js):

/*! bellows 2.0.2 2014-09-04 */
(function(t){
	if("function"==typeof define&&define.amd)define(["$","velocity"],t);
	else{
	var e=window.Zepto||window.jQuery;
	t(e,e.Velocity)}
}
)(function(t,e){
	function i(t,e){
	this._init(t,e)}
var o="bellows",n=function(){
}
,s="bellows__item",l="bellows--is-open",r="bellows--is-opening",a="bellows--is-closing",h={
	ITEM_HEADER:"> .bellows__item > .bellows__header",ITEM_CONTENT_WRAPPER:"> .bellows__content-wrapper",ITEM_CONTENT:"> .bellows__item > .bellows__content"}
;
	return i.VERSION="2.0.0",i.DEFAULTS={
	singleItemOpen:!1,event:"click",duration:200,easing:"swing",open:n,opened:n,close:n,closed:n}
,i.prototype._init=function(e,o){
	this.options=t.extend(!0,{
}
,i.DEFAULTS,o),this.$bellows=t(e),this.$bellows.find(h.ITEM_CONTENT).wrap('<div class="bellows__content-wrapper" />').parents(".bellows__item:not(.bellows--is-open)").find(h.ITEM_CONTENT_WRAPPER).attr("aria-hidden",!0),this._bindEvents()}
,i.prototype._bindEvents=function(){
	var e=this;
	this.$bellows.find(h.ITEM_HEADER).bind(this.options.event,function(i){
	i.preventDefault(),e.toggle(t(this).parent())}
)}
,i.prototype._getHeight=function(t){
	return parseFloat(e.CSS.getPropertyValue(t[0],"height"))}
,i.prototype._setHeight=function(t){
	this.$bellows.css("height",t||"")}
,i.prototype._item=function(t){
	return"number"==typeof t&&(t=this.$bellows.find("."+s).eq(t)),t}
,i.prototype._trigger=function(e,i){
	e in this.options&&this.options[e].call(this,t.Event(o+":"+e,{
	bubbles:!1}
),i)}
,i.prototype.toggle=function(t){
	t=this._item(t),this[t.hasClass(l)?"close":"open"](t)}
,i.prototype.open=function(t){
	if(t=this._item(t),!t.hasClass(l)){
	var i=this,o=t.find(h.ITEM_CONTENT_WRAPPER);
	this.options.singleItemOpen&&this.closeAll(),this._trigger("open",{
	item:t}
),e.animate(o,"slideDown",{
	begin:function(){
	i._setHeight(i._getHeight(i.$bellows)+i._getHeight(o)),t.addClass(r)}
,duration:this.options.duration,easing:this.options.easing,complete:function(){
	t.removeClass(r).addClass(l).find(h.ITEM_CONTENT_WRAPPER).removeAttr("aria-hidden"),i._setHeight(),i._trigger("opened",{
	item:t}
)}
}
)}
}
,i.prototype.close=function(t){
	if(t=this._item(t),t.hasClass(l)){
	var i=this,o=t.find(h.ITEM_CONTENT_WRAPPER);
	this._trigger("close",{
	item:t}
),e.animate(o,"slideUp",{
	begin:function(){
	i._setHeight(i._getHeight(i.$bellows)),t.removeClass(l).addClass(a)}
,duration:this.options.duration,easing:this.options.easing,complete:function(){
	t.removeClass(a).find(h.ITEM_CONTENT_WRAPPER).attr("aria-hidden",!0),i._setHeight(),i._trigger("closed",{
	item:t}
)}
}
)}
}
,i.prototype.closeAll=function(){
	var e=this;
	this.$bellows.find("."+l).each(function(){
	e.close(t(this))}
)}
,t.fn.bellows=function(e){
	var n=Array.prototype.slice.call(arguments);
	return this.each(function(){
	var s=t(this),l=s.data(o),r="string"==typeof e;
	if(!l){
	if(r)throw'cannot call methods on bellows prior to initialization;
	attempted to call method "'+e+'"';
	s.data(o,l=new i(this,e))}
if(r){
	if("_"===e.charAt(0)||"function"!=typeof l[e])throw'no such method "'+e+'" for bellows';
	l[e].apply(l,n.length>1?n.slice(1):null)}
}
)}
,t.fn.bellows.Constructor=i,t("[data-bellows]").bellows(),t}
);

CSS代码(bellows.css):

.bellows__item:not(.bellows--is-open) > .bellows__content{display:none;}
.bellows__item.bellows--is-open > .bellows__content-wrapper,.bellows__item.bellows--is-closing > .bellows__content-wrapper{display:block;}
.bellows__content-wrapper{display:none;}

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