html5手風琴下拉突出展示問答列表效果



129 513 172



特效描述:手風琴下拉 問答列表效果,自制簡單實用的手風琴問答列表展示效果,歡迎使用(不兼容IE6,7,8)

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/paper-collapse.min.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/paper-collapse.min.js"></script>

3. HTML代碼

<div class="container">
	<div class="collapse-card">
		<div class="collapse-card__heading">
			<h4 class="collapse-card__title">
				<i class="fa fa-question-circle fa-2x fa-fw"></i>
				哦,你好!
			</h4>
		</div>
		<div class="collapse-card__body">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
			labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
			ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
			dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
			magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
			clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>
	</div>
	<div class="collapse-card">
		<div class="collapse-card__heading">
			<h4 class="collapse-card__title">
				<i class="fa fa-question-circle fa-2x fa-fw"></i>
				gigantomaniac怪物的文字,很長,很寬,哇
			</h4>
		</div>
		<div class="collapse-card__body">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
			labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
			ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
			dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
			magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
			clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			<div class="collapse-card__close_handler mt1 align-right mouse-pointer">
				Show less <i class="fa fa-chevron-up"></i>
			</div>
		</div>
	</div>
	<div class="collapse-card">
		<div class="collapse-card__heading">
			<h4 class="collapse-card__title">
				<i class="fa fa-question-circle fa-2x fa-fw"></i>
				通用標題
			</h4>
		</div>
		<div class="collapse-card__body">
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
			labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
			ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
			dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
			magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
			clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
		</div>
	</div>
</div>
<script type="text/javascript">
	$('.collapse-card').paperCollapse();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動手風琴
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表