晨露博客

相信大家都见过一些网站上的折叠效果，当鼠标点击相应的位置时，特定的部分会像抽屉一样折叠隐藏或是再现，那么，今天就来和大家一起分享一下这个技术吧。

总体效果如下图所示：

关键代码：

第一行将向<div class="accordion"> 内的第一个<H3> 添加一个CSS class为"active"的值。 第二行刚是隐藏<div class="accordion">内非第一个< p >的内容。

当 <h3> 被点击时，当前<p>下拉，而原先下拉的<p> 上提。

$(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");

    });

});

您可以查看演示，或是下载源代码。