第一行代码会为<div> 元素中的第一个<H3>元素添加一个active的class。第二行会隐 藏<div>中除第一外的所有<p>元素。当<h3> 元素被人点击时，他会将下一个<P>元素下拉显示，然后收起所有兄弟节点的内容，接着添加属性class=“active” 。

下面是核心jQuery代码：

$(document).ready(function () {
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();
    $(".accordion h3").click(function () {
        $(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

手风琴式折叠面板源码|共16.69 kB|已下载(38)次