Jquery accordéion ne retire pas Class et n’échange pas son texte Développer pour Réduire

Merci à @ifaour pour son aide! Ce script comprend:

  • JQuery accordéon en utilisant des listes non ordonnées.
  • États actifs et inactifs avec basculement des images en forme de flèche
  • Développer tout / Réduire tout ce qui échange son texte.
  • Colonnes d’égale hauteur qui se développent et se réduisent lorsque l’accordéon se dilate et se réduit

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'); } } );