1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
2. 引入JS
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.gridAccordion.min.js"></script>
3. HTML代码
<ul class="accordion"> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption">This is just a simple caption.</div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption"><u>Title</u><br/><br/>This is a list of items:<ul><li>first item</li><li>second item</li><li>third item</li></ul></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption">Captions can have any position and any size.</div> </li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption">Add <b>HTML</b> elements like <a href="https://www.51qianduan.com/">51前端</a> or <input type="button" value="Buttons"></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption"><u>Title</u><br/><br/>This is a list of items:<ul><li>first item</li><li>second item</li><li>third item</li></ul></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption">Add <b>HTML</b> elements like <a href="https://www.51qianduan.com/">51前端</a> or <input type="button" value="Buttons"></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption"><u>Title</u><br/><br/>This is a list of items:<ul><li>first item</li><li>second item</li><li>third item</li></ul></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> <li> <a href="https://www.51qianduan.com/">51前端</a> <div class="caption">Add <b>HTML</b> elements like <a href="https://www.51qianduan.com/">51前端</a> or <input type="button" value="Buttons"></div> </li> <li><a href="https://www.51qianduan.com/">51前端</a></li> </ul>