基于jQuery实现简单的折叠菜单效果

本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

Html代码如下：

  
菜单一
  

   
1111
   
1111
   
1111
  
  
菜单二
  

   
2222
   
2222
   
2222
  
  
菜单三
  

   
3333
   
3333
   
3333
  

插件实现代码如下：

(function ($) {
   $.fn.Fold = function (options) {
    //默认参数设置
    var settings = {
     speed: 300 //折叠速度(值越大越慢)
    }

    //不为空则合并参数
    if (options)
     $.extend(settings, options);
　　　　　　　　　
　　　　　　　　　//遵循链式原则
　　　　　　　　　return this.each(function () {

    　　//为每个p元素绑定点击事件
    　　$("> p", this).each(function () {
     　　$(this).bind("click", function () {
      　　$(this).next("ul").slideToggle(settings.speed);
     　　});
    　　});

    　　//默认第一个展开，其它折叠
    　　$("> ul", this).hide().first().show();
    
    });
   }
})(jQuery);

这里就不作讲解了，注释都写明了。
示例DEMO如下：

 
 
  *{padding:0;margin:0;}
  ul,ul li{ list-style:none;}
  .box{ width:250px; margin:50px auto; border:1px solid gray;}
  .box p{ background-color: Green;color: white;cursor: pointer;font-weight: bold;
  line-height: 40px;padding-left: 15px;}
 


 
  
菜单一
  

   
1111
   
1111
   
1111
  
  
菜单二
  

   
2222
   
2222
   
2222
  
  
菜单三
  

   
3333
   
3333
   
3333
  
 

 
 
 

希望本文所述对大家学习jquery程序设计有所帮助。