首页 | 4433 | 361 | 1753 | 添加收藏 上一个 下一个
简洁实用的jQuery手风琴插件

使用该手风琴插件需要引入jQuery,jquery.accordion.js和jquery.accordion.css文件。


<link rel="stylesheet" type="text/css" href="css/jquery.accordion.css">
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="js/jquery.accordion.js"></script>

HTML结构


该手风琴特效的HTML结构非常简单:使用一个<div>作为包裹元素,在里面使用一个无序列表来制作手风琴项。


<div class="accordion">
    <ul>
        <li class="item1 active"><a href=""></a></li>
        <li class="item2"><a href=""></a></li>
        <li class="item3"><a href=""></a></li>
        <li class="item4"><a href=""></a></li>
        <li class="item5"><a href=""></a></li>
    </ul>
</div>