jQuery简洁线条垂直手风琴代码

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

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

以下是 jQuery简洁线条垂直手风琴代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery简洁线条垂直手风琴代码</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap.min.css" />
<style type="text/css">
	.panel-group .panel{
		border:0px none;
		border-radius: 0px;
		box-shadow: none;
		border-bottom: 1px solid #676767;
	}
	.panel-heading{
		padding: 0;
	}
	.panel-default > .panel-heading {
		color: #7a4b94;
	}
	.panel-title{
		position: relative;
	}
	.panel-title > a{
		display: block;
		padding: 11px 35px;
		background: #fff;
		font-weight: 600;
	}
	.panel-title > a:hover,
	.panel-title > a:focus{
		text-decoration: none;
		outline: none;
	}
	.panel-title a:before{
		content: "\f068";
		font-family: 'FontAwesome';
		margin-right: 10px;
		color:#7a4b94;
		font-weight: normal;
		position: absolute;
		left:10px;
		top:11px;
	}
	.panel-title .collapsed:before{
		content: "\f067";
	}
	.panel-title a.collapsed{
		color:#7a4b94;
		font-weight: normal;
	}
	.panel-body{
		color:#727272;
		padding: 5px 10px 30px;
		line-height: 23px;
		letter-spacing: 1px;
	}
	.panel-default > .panel-heading + .panel-collapse > .panel-body{
		border-top: 0px none;
	}
</style>

</head>
<body>
<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingOne">
							<h4 class="panel-title">
								<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
									Section 1
								</a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
							<div class="panel-body">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingTwo">
							<h4 class="panel-title">
								<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
									Section 2
								</a>
							</h4>
						</div>
						<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
							<div class="panel-body">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
							</div>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingThree">
							<h4 class="panel-title">
								<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
									Section 3
								</a>
							</h4>
						</div>
						<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
							<div class="panel-body">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

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