jquery show / hide与toggle / accordion效果集成

时间:2010-03-30 18:18:40

标签: jquery animation

我有一个显示/隐藏切换在多个实例中运行良好(感谢此处的帮助 - 搜索'jquery切换以在多个实例中工作')。

我想将它整合到主要类别的扩展菜单/手风琴风格中。 我有一个脚本,它可以独立工作,但我不能让它与show / hide集成。

工作秀/隐藏: http://pastebin.me/c69869d7a80fdb439ca16304b821c146

我要整合的扩展菜单脚本: http://pastebin.me/03b685f586fef84193b5fd72e815255d

1 个答案:

答案 0 :(得分:2)

我不确定完全你所追求的是什么,所以这是一个猜测和快速削减,需要优化,但应该工作:

jQuery.fn.expandingMenu = function(options) {
   settings = jQuery.extend({
     speed: 500,
     show: 10,
     hideCaption: 'Hide',
     showCaption: 'More'
  }, options);

  if (this.children('.active').length) return this;

  this.each(function() {
    if ($(this).children().slice(settings.show).hide().length) {
       $(this).append($('<li class="toggler">' + settings.showCaption + '</li>').toggle(function() {
          $(this).text(settings.hideCaption).siblings().slideDown(settings.speed);
       }, function() { 
          $(this).text(settings.showCaption).siblings().slice(settings.show + 1).slideUp(settings.speed);
       }));
    }

    $(this).children().hide().first().show().css({cursor:"pointer"}).toggle(function () { 
      $(this).siblings().slice(0, settings.show).add($(this).siblings('.toggler')).show(settings.speed);
    }, function () {
        $(this).siblings().hide(settings.speed);
    });
  });
  return this;
};

$(function() {
    $('ul').expandingMenu({ speed: 200, showCaption: "Gimme More" });     
});

See it in action here。这个例子使它成为一个插件模型,所以你可以像上面的例子一样调用$('ul').expandingMenu()(和链接它),包括速度选项,要显示的数量以及隐藏/显示字幕。看一看,告诉我哪些部分不对,很容易从那里调整。