<![CDATA[刘新修]]> http://pic1.liuxinxiu.com:80/index.php zh-cn http://pic1.liuxinxiu.com:80/simple-slide-panel/ <![CDATA[jQuery简易下拉面板实例教程]]> 刘新修 <admin@yourname.com> Sat, 18 May 2013 16:17:26 +0000 http://pic1.liuxinxiu.com:80/simple-slide-panel/  下面，让我们来学习制作一个简易的下拉面板。你可能已经见过许多下拉面板，在上面你只需要点击提示按钮，页面就会出现一个下拉面板。

下面是核心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背景定位改变箭头的背景位置。


Tags - , , ]]> http://pic1.liuxinxiu.com:80/simple-slide-panel/#blogcomment <![CDATA[[评论] jQuery简易下拉面板实例教程]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://pic1.liuxinxiu.com:80/simple-slide-panel/#blogcomment