html5手风琴下拉突出展示问答列表效果



123 489 164



特效描述:手风琴下拉 问答列表效果,自制简单实用的手风琴问答列表展示效果,欢迎使用(不兼容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

加群请备注:从官网了解到