jquery show/hide integrated with toggle/accordion effect
I have a show/hide toggle working well in multiple instances (thanks to help here - search fo开发者_如何学Pythonr 'jquery toggle to work in multiple instances').
I want to integrate it into an expanding menu / accordion style for the main categories. I have a script and it works on its own but I can't get it to work integrated with the show/hide.
The working show/hide: http://pastebin.me/c69869d7a80fdb439ca16304b821c146
the expanding menu script I want to integrate: http://pastebin.me/03b685f586fef84193b5fd72e815255d
I'm not sure exactly what you're after, so this is a bit of a guess and a quick rought cut, needs optimization, but should work:
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. This example makes it a plugin model, so you can call $('ul').expandingMenu()
(and chain it) like the example above with options for speed, how many to show, and the hide/show captions as well. Take a peek and tell me which parts aren't quite right, easy to adjust from there.
精彩评论