基于jQuery实现简单的折叠菜单效果_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如下：

  
菜单一
  

1111
   
1111
   
1111
  
菜单二
  

2222
   
2222
   
2222
  
菜单三
  

3333
   
3333
   
3333
  


 

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