jquery 3d展开收缩图文列表代码，点击每个图文的任意位置，都可以展开更多的说明文字内容，还有一个按钮可以链接到图文消息的页面（链接可自由设置），当前激活的图文内容会有一个放大的突出显示效果。
页面的head部分，仅需引入一个CSS样式文件即可，代码如下：
<link type="text/css" rel="stylesheet" href="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben912/css/style.css">页面的body部分，不难看出多个div容器的嵌套，相似的内容复制粘帖即可，代码如下：
<div class="cards">
<div class="card">
<img src="http://s4c.cymru/temp/wave1.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave2.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave3.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave2.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave3.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave1.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave3.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave1.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
<div class="card">
<img src="http://s4c.cymru/temp/wave2.jpg">
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
图片标题
<small>图片的简单说明文字</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
</div>
<div class="card-flap flap2">
<div class="card-actions">
<a href="#" class="btn">更多内容</a>
</div>
</div>
</div>
</div>
</div>页面的底部，需远程调用jQuery库和modernizr插件，并引入本地的JS文件，代码如下：
<script src='http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben912/jquery.min.js'></script>
<script src='http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben912/modernizr.min.js'></script>
<script type="text/javascript" src="http://www.datouwang.com/uploads/demo/jiaoben/2017/jiaoben912/js/index.js"></script>
演示地址：http://www.datouwang.com/jiaoben/1217.html
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
