下面,让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板,在上面你只需要点击提示按钮,页面就会出现一个下拉面板。
下面是核心jQuery代码:
JavaScript代码
- $(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背景定位改变箭头的背景位置。