我不知道究竟你之後,還等什麼,這是一個有點猜測和快速抗旱切割,需要優化,但應該工作:
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()
(並鏈接它)像上面的例子,選擇速度,顯示多少,以及隱藏/顯示標題。看一眼,告訴我哪些部分不太正確,從那裏容易調整。
太棒了!看起來在我身上 - 謝謝尼克。我會完全測試它。 – mark 2010-03-30 19:44:37
尼克它是這樣的答案,讓我愛StackOverflow! – jerrygarciuh 2013-05-28 15:29:48