jquery 3d展开收缩图文列表代码

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