2010-03-30 76 views
1

我有一個顯示/隱藏切換在多個實例中運行良好(感謝這裏的幫助 - 搜索'jquery切換到多個實例工作')。jQuery的顯示/隱藏與切換/手風琴效果集成

我想將它集成到主類別的擴展菜單/手風琴風格。 我有一個腳本,它自己的工作,但我不能讓它與顯示/隱藏集成工作。

工作顯示/隱藏: http://pastebin.me/c69869d7a80fdb439ca16304b821c146

擴展菜單劇本我要整合: http://pastebin.me/03b685f586fef84193b5fd72e815255d

回答

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()(並鏈接它)像上面的例子,選擇速度,顯示多少,以及隱藏/顯示標題。看一眼,告訴我哪些部分不太正確,從那裏容易調整。

+0

太棒了!看起來在我身上 - 謝謝尼克。我會完全測試它。 – mark 2010-03-30 19:44:37

+0

尼克它是這樣的答案,讓我愛StackOverflow! – jerrygarciuh 2013-05-28 15:29:48