Comment sortinger correctement plusieurs accordéons avec jQuery

C’est la première fois que je publie un message, merci de me le faire savoir si je ne fournis pas assez de détails.

J’ai une page qui contient plusieurs accordéons. Je voulais utiliser plusieurs accordéons parce que je voulais que les utilisateurs puissent avoir plusieurs sections ouvertes en même temps, ce qui n’est pas natif pour l’accordéon.

Je veux aussi que les utilisateurs puissent sortinger ces accordéons. La configuration actuelle de la page permet aux utilisateurs de sortinger l’accordéon sans problème.

Lorsque l’utilisateur va sortinger les accordéons, j’ai un script qui ferme tous les accordéons existants, stocke leurs identifiants dans un tableau, puis les rouvre lorsque l’utilisateur a fini de sortinger. Cette partie fonctionne bien aussi.

• Comment annuler l’événement change pour les contrôles accordéon
• L’accordéon JQuery ne fonctionne pas sans les balises h3
• accordéon multi-niveau
• Comment supprimer un contour actif de jquery accordéon?
• jQuery Accordion si hasClass

Le problème se produit lorsque vous essayez de placer la section que vous sortingez entre deux sections précédemment ouvertes. Il ne semble pas que jQuery puisse facilement dire où une section commence et une autre se termine quand elles sont fermées par programme. Notez que s’ils étaient déjà fermés, cela fonctionne comme prévu.

J’ai essayé plusieurs solutions à ce problème, notamment l’ajout d’un séparateur d’espacement entre les sections, la destruction des accordéons, puis leur réinitialisation une fois le sorting terminé, mais en vain.

Je soupçonne que le problème se pose car, lorsque l’accordéon est saisi pour la première fois, les sections sont ouvertes. Mais à ce stade, je ferme toutes les sections et même si la section est fermée, les sections changent sporadiquement lorsque vous essayez de placer une section entre deux.

J’ai également remarqué que la hauteur du contenu de l’accordéon entrait en jeu. Dans mon exemple ci-dessous, la première div pose des problèmes lorsqu’elle est ouverte et que vous essayez de les sortinger mais que les autres le sont moins.

Voici le code que j’ai. JQuery est la bibliothèque de base jQuery et les éléments que j’ai écrits sont inclus en ligne pour plus de simplicité:

      $(document).ready(function() { // Add Accordion stuff $(".accordion").accordion({ autoHeight: false, active: false, collapsible: true }); // end $(".accordion").accordion // Add sortables $('.sortable').sortable({ start: function(e, ui) { container = $(e.target); var parent_id = container.parent().parent().attr('id'); expanded_ones = new Array(); var count = 0; var summary = ''; var child = ''; var active = ''; // now close all other sections $.each($('#' + parent_id + ' .accordion'), function() { // get the child element since that has the div id I need child = $(this).children('div'); // get the active information to see if it is open or closed active = $(this).accordion('option', 'active'); // check to see if this one is expanded if(parseInt(active) == active) { // store this id so we can open it later expanded_ones[count] = $(child).attr('id'); count++; // and close the accordion $(this).accordion({ active: false }); } // end if(parseInt(active) == active) }); // end $.each($('#' + parent_id + ' .accordion'), function() }, // end start: function(e, ui) stop: function(e, ui) { container = $(e.target); var parent_elem = ''; // expand the ones that were originally expanded for(var i = 0; i < expanded_ones.length; i++) { parent_elem = $('#' + expanded_ones[i]).parent(); $(parent_elem).accordion('option', 'active', 0); } // end for(var i = 0; i < expanded_ones; i++) } // end stop: function(e, ui) }); // end $('.sortable').sortable }); // end $(document).ready(function() {    
 
 
 
 
 
Accordion A
 
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
Stuff
 
 
 
 
 
 
Accordion B
 
 Stuff 
 
 
 
 
 
Accordion C
 
 Stuff 
 
 
 
 
 
Accordion D
 
 Stuff 
 
 
 
 
 
   

• Comment faire en sorte que cette liste de FAQ expand / collapse fonctionne?
• L’événement de changement d’accordéon JQuery ne se déclenche pas
• Bootstrap 3 – L’événement hidden.bs.collapse n’est pas déclenché si l’accordéon est à l’intérieur d’un modal rempli via ajax
• Mon curseur ne fonctionne pas en mode automatique
• jQuery Accordion changer la police icône génial sur le clic

  $(document).ready(function(){ $('.accordion .head').click(function(){ $(this).next().toggle(); return false; }).next().hide(); }); 

  $(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });