Merci à @ifaour pour son aide! Ce script comprend:
Vous pouvez voir une démo ici http://jsbin.com/ucobo3/24/
(function($) { $.fn.equalHeights = function(minHeight, maxHeight) { tallest = (minHeight) ? minHeight : 0; this.each(function() { if($(this).height() > tallest) { tallest = $(this).height(); } }); if((maxHeight) && tallest > maxHeight) tallest = maxHeight; return this.each(function() { if ($.browser.msie && $.browser.version == 6.0) { $(this).height(tallest); } $(this).css('min-height', tallest + 'px').css('overflow', 'auto'); }); } })(jQuery); jQuery.fn.initMenu = function() { var isCollapsed = true; // default value var collapseAll = 'Collapse All'; var expandAll = 'Expand All'; $('.swap').click(function() { if(!isCollapsed) { $('ul.menu li ul').slideUp('normal'); $('ul.menu li').removeClass('active'); $(this).text(expandAll); isCollapsed = true; } else { $('ul.menu li ul').slideDown('normal'); $('ul.menu li').addClass('active'); $(this).text(collapseAll); isCollapsed = false; } return false; }); return this.each(function(){ var theMenu = $(this).get(0); $('.acitem', this).hide(); $('li.expand > .acitem', this).show(); $('li.expand > .acitem', this).prev().addClass('active'); $('li a', this).click( function(e) { e.stopImmediatePropagation(); var theElement = $(this).next(); var parent = this.parentNode.parentNode; if($(parent).hasClass('noaccordion')) { if(theElement[0] === undefined) { window.location.href = this.href; } $(theElement).slideToggle('normal', function() { if ($(this).is(':visible')) { $(this).parent().addClass('active'); } else { $(this).prev().parent().removeClass('active'); } }); return false; } else { if(theElement.hasClass('acitem') && theElement.is(':visible')) { if($(parent).hasClass('collapsible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().parent().removeClass('active'); } ); return false; } return false; } if(theElement.hasClass('acitem') && !theElement.is(':visible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().parent().removeClass('active'); }); theElement.slideDown('normal', function() { $(this).prev().parent().addClass('active'); }); return false; } } } ); }); }; $(document).ready(function() { $('.menu').initMenu(); $('.column').equalHeights(); });
Merci!!
Voici mon essai:
jQuery.fn.initMenu = function() { var isCollapsed = true; // default value var collapseAll = 'Collapse All'; var expandAll = 'Expand All'; $('.swap').click(function() { if(!isCollapsed) { $('ul.menu li ul').slideToggle('normal'); $('ul.menu li a').removeClass('active'); $(this).text(expandAll); isCollapsed = true; } else { $('ul.menu li ul').slideToggle('normal'); $('ul.menu li a').addClass('active'); $(this).text(collapseAll); isCollapsed = false; } return false; }); return this.each(function(){ var theMenu = $(this).get(0); $('.acitem', this).hide(); $('li.expand > .acitem', this).show(); $('li.expand > .acitem', this).prev().addClass('active'); $('li a', this).click( function(e) { e.stopImmediatePropagation(); var theElement = $(this).next(); var parent = this.parentNode.parentNode; if($(parent).hasClass('noaccordion')) { if(theElement[0] === undefined) { window.location.href = this.href; } $(theElement).slideToggle('normal', function() { if ($(this).is(':visible')) { $(this).addClass('active'); } else { $(this).prev().removeClass('active'); } }); return false; } else { if(theElement.hasClass('acitem') && theElement.is(':visible')) { if($(parent).hasClass('collapsible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); } ); return false; } return false; } if(theElement.hasClass('acitem') && !theElement.is(':visible')) { $('.acitem:visible', parent).first().slideUp('normal', function() { $(this).prev().removeClass('active'); }); theElement.slideDown('normal', function() { $(this).prev().addClass('active'); }); return false; } } } ); }); }; $(document).ready(function() {$('.menu').initMenu();});
Exemple de lien .
.swap
lien .swap
étant commun à tous, inutile de le .swap
dans each
boucle.
Vous êtes assez proches, le problème réside dans le fait que vous utilisez .text () pour définir le lien.
$(this).text($(this).text().prev() == 'Click to Collapse');
Cette ligne de code tente de définir le texte sur $ (this) avec le retour de $(this).text().prev() == 'Click to Collapse');
$(this).text()
renvoie la chaîne “Click to Collapse”.
.prev()
n’est pas une fonction valide sur les chaînes, ce qui entraînera une erreur javascript.
Ce que vous voulez faire est $(this).text("Click to Expand");
Le résultat final ressemblera à ceci:
$('.swap').click(function() { if($(this).text() == 'Click to Collapse') { $('ul.menu li ul').slideToggle('normal'); $('ul.menu li a').removeClass('active'); $(this).text('Click to Expand'); }else{ $('ul.menu li ul').slideToggle('normal'); $('ul.menu li a').addClass('active'); $(this).text('Click to Collapse'); } } );