jQuery简易下拉面板实例教程

| |
[不指定 2013/05/19 00:17 | by 刘新修 ]

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

下面是核心jQuery代码:

JavaScript代码
  1. $(document).ready(function(){  
  2.     $(".btn-slide").click(function(){  
  3.         $("#panel").slideToggle("slow");  
  4.         $(this).toggleClass("active");  
  5.         return false;  
  6.     });  
  7. });  

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

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4563)