Cómo ordenar correctamente varios acordeones con jQuery

Esta es la primera vez que publico, así que avíseme si no proporciono los detalles suficientes.Cómo ordenar correctamente varios acordeones con jQuery

Tengo una página que contiene varios acordeones. Quería usar varios acordeones porque quería que los usuarios pudieran tener varias secciones abiertas al mismo tiempo, lo que no es nativo de acordeón.

También quiero que los usuarios puedan ordenar esos acordeones. La forma en que la página está configurada actualmente, los usuarios pueden ordenar el acordeón sin problemas.

Cuando el usuario va a ordenar los acordeones, tengo un script que cerrará todos los acordeones existentes, almacenará sus identificadores en una matriz y luego los volverá a abrir cuando el usuario termine de ordenar. Esa parte también funciona bien.

El problema se produce cuando intenta colocar la sección que está ordenando entre dos secciones que estaban abiertas anteriormente. No parece que jQuery pueda decir fácilmente dónde comienza una sección y dónde termina cuando están cerradas programáticamente. Tenga en cuenta que si ya estaban cerrados, funciona como se esperaba.

He intentado varios enfoques para este problema, incluyendo agregar un separador div entre las secciones, así como destruir los acordeones y luego reiniciarlos después de que la clasificación haya finalizado en vano.

Sospecho que el problema ocurre porque cuando se toca por primera vez el acordeón, las secciones están abiertas. Pero en ese momento, cierro todas las secciones y aunque la sección se cierra, hace que esas secciones salten esporádicamente cuando tratas de poner una sección entre dos.

También he notado que la altura del contenido del acordeón influye. En mi ejemplo a continuación, el primer div causa problemas cuando está abierto y usted trata de ordenarlos pero los otros lo hacen menos.

Aquí está el código que tengo. El jQuery es la biblioteca básica jQuery y las cosas que escribí Incluí en línea para mayor simplicidad:

<html> 
<head> 
<link href="/css/flick/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript" src="/js/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(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() { 
</script> 
</head> 
<body> 
<div id="outer"> 
    <div class="box"> 
    <div class="accordion_wrapper sortable" rel="sections"> 
     <div id="accordion_a" class="section_accordion"> 
     <div class="accordion"> 
      <h4>Accordion A</h4> 
      <div id="accordion_a_content"> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      <p>Stuff</p> 
      </div> 
     </div> 
     </div> 

     <div id="accordion_b" class="section_accordion"> 
     <div class="accordion"> 
      <h4>Accordion B</h4> 
      <div id="accordion_b_content"> 
      Stuff 
      </div> 
     </div> 
     </div> 

     <div id="accordion_c" class="section_accordion"> 
     <div class="accordion"> 
      <h4>Accordion C</h4> 
      <div id="accordion_c_content"> 
      Stuff 
      </div> 
     </div> 
     </div> 

     <div id="accordion_d" class="section_accordion"> 
     <div class="accordion"> 
      <h4>Accordion D</h4> 
      <div id="accordion_d_content"> 
      Stuff 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
    </body> 
</html>

Fuente

2011-02-22 lokisapocalypse

En primer lugar yo diría, esto realmente no necesita estar en accordians ni ordenar? En segundo lugar configuré su ejemplo here. Usando este ejemplo, el ordenable puede enviar la página por todos lados, especialmente cuando el accordian A está abierto. Esto puede ser extremadamente confuso para algunos usuarios. Yo recomendaría encontrar otra opción para completar su tarea.

De jQueries página web API on Accordian

NOTA: Si desea que varias secciones abiertas al mismo tiempo, no utilice un acordeón

Un acordeón no permite más de un panel de contenido para abrir en el al mismo tiempo, y se necesita un gran esfuerzo de para hacer eso. Si está buscando para un widget que permite que se abra más de un panel de contenido , no use esto.Por lo general, se puede escribir con un pocas líneas de jQuery lugar, algo así:

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

o animado:

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

por lo que recomiendo la creación de su propia personalizada código si desea tener múltiples accordians abiertos que sean ordenables.

Fuente

2011-02-25 05:22:09

Gracias por el asesoramiento. Terminé implementando algo similar y funciona muy bien. – lokisapocalypse

En esta publicación se muestra cómo abrir varias secciones a la vez en un acordeón. Looking for a JQuery plug-in similar to Accordian, but that allows multiple sections open at once

Fuente

2012-12-06 01:46:51

Cómo ordenar correctamente varios acordeones con jQuery

Respuesta

Cuestiones relacionadas