下面，让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板，在上面你只需要点击提示按钮，页面就会出现一个下拉面板。

下面是核心jQuery代码：

$(document).ready(function(){
 $(".btn-slide").click(function(){
 $("#panel").slideToggle("slow");
 $(this).toggleClass("active");
 return false;
 });
});

当点击一个带有class=”btn-slide”的元素时，jQuery就会对 <div id=”panel”> 元素进行展收操作（slideToggle），并且给<a class=”btn-slide”>元素添加一个class=”active”的属性。然后.active class通过CSS背景定位改变箭头的背景位置。

jQuery下拉面板源码下载|共17.25 kB|已下载(32)次