Estoy usando el interfaz de usuario jQuery Accordion (que no no se permiten más de un elemento abierto en un tiempo) en un proyecto. Utilizando el acordeón es apropiado, ya que yo normalmente hacer sólo quieren un panel abierto al mismo tiempo.

Sin embargo, tengo para ofrecer un «Expandir Todo» enlace que cambia a «cerrar Todo» cuando se hace clic. No quiero personalizado escribir casi idénticas, acordeón la funcionalidad de este requisito, así que me gustaría un poco de JS que va a lograr esto manteniendo el componente Accordion en uso.

Pregunta: Lo JavaScript/jQuery es necesario para lograr esto, mientras que aún usando la interfaz de usuario jQuery «Acordeón» componente de energía de la funcionalidad estándar?

Aquí un violín: http://jsfiddle.net/alecrust/a6Cu7/

InformationsquelleAutor AlecRust | 2012-10-11

12 Comentarios

  1. 50

    Como se discutió en la interfaz de usuario jQuery en foros, usted no debe usar acordeones para esto.

    Si quieres algo que se ve y actúa como un acordeón, que está muy bien. Utilizar sus clases al estilo de ellos, y de implementar cualquier funcionalidad que usted necesita. A continuación, la adición de un botón para abrir o cerrar todas ellas es bastante sencillo. Ejemplo

    HTML

    Mediante el uso de jquery-ui clases, debemos mantener a nuestros acordeones buscando igual que el de «real» acordeones.

    <div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
        <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
            <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
            Section 1
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
            Content 1
        </div>
    </div>​

    Rollo de su propia acordeones

    Su mayoría sólo queremos acordeón encabezados para cambiar el estado de las siguientes hermano, que es su área de contenido. También hemos añadido dos eventos personalizados «mostrar» y «ocultar» que vamos a conectar a más tarde.

    var headers = $('#accordion .accordion-header');
    var contentAreas = $('#accordion .ui-accordion-content ').hide();
    var expandLink = $('.accordion-expand-all');
    
    headers.click(function() {
        var panel = $(this).next();
        var isOpen = panel.is(':visible');
    
        //open or close as necessary
        panel[isOpen? 'slideUp': 'slideDown']()
            //trigger the correct custom event
            .trigger(isOpen? 'hide': 'show');
    
        //stop the link from causing a pagescroll
        return false;
    });

    Expandir/Contraer Todo

    Utilizamos un valor booleano isAllOpen para marcar cuando el botón ha cambiado, esto podría haber sido fácilmente una clase, o una variable de estado en un mayor plugin marco.

    expandLink.click(function(){
        var isAllOpen = $(this).data('isAllOpen');
    
        contentAreas[isAllOpen? 'hide': 'show']()
            .trigger(isAllOpen? 'hide': 'show');
    });

    De intercambio el botón cuando «todo abierto»

    Gracias a nuestro servicio de «mostrar» y «ocultar» de los eventos, tenemos algo para escuchar cuando los paneles están cambiando. El único caso especial es «son todas abiertas», si si, el botón debe ser un «Colapso todos», si no que debe ser «Expandir todo».

    contentAreas.on({
        //whenever we open a panel, check to see if they're all open
        //if all open, swap the button to collapser
        show: function(){
            var isAllOpen = !contentAreas.is(':hidden');   
            if(isAllOpen){
                expandLink.text('Collapse All')
                    .data('isAllOpen', true);
            }
        },
        //whenever we close a panel, check to see if they're all open
        //if not all open, swap the button to expander
        hide: function(){
            var isAllOpen = !contentAreas.is(':hidden');
            if(!isAllOpen){
                expandLink.text('Expand all')
                .data('isAllOpen', false);
            } 
        }
    });​

    Editar comentarios:
    El mantenimiento de «1 panel abierto sólo» a menos que usted golpea la opción «Expandir todo» es realmente mucho más fácil. Ejemplo

    • Gracias por este. Como se ha explicado, yo no entiendo que yo no ser el uso de acordeón para esto, pero mi pregunta es si es posible a lo largo de la parte superior de la actual interfaz de usuario jQuery Accordion componente. Sería una cosa si su cantidad relativamente grande de jQuery producido un idéntico acordeón de jQuery UI s (sólo un panel abierto en un tiempo, etc.) pero no lo hace.
    • Es posible? La respuesta simple es no. Usted puede editar el código fuente en un montón de lugares separados para hacerlo, pero que no está haciendo uso de él, que es volver a redactarlo. Y sí, «grande» es relativo. La interfaz de usuario jQuery accordion fuente 738 líneas de código, y eso es sólo debido a que se basa en jquery.ui.core.js y jquery.ui.widget.js
    • Muchas gracias. Fue interesante ver si esto fue posible, gracias por sus respuestas.
    • Una última pregunta: ¿Cómo puedo reproducir el primer elemento que se va a abrir, como la interfaz de usuario jQuery Accordion por defecto?
    • mediante la adición de .first().show() a la línea que inicialmente se esconde todos los paneles de contenido. He actualizado el ejemplo final.
    • Parece que eso de los paneles de la onu-plegable. Está bien, se han resuelto con esta solución híbrida.
    • Me alegro de que haya encontrado una solución que funcione para usted.
    • Su ejemplo no funciona fo TODOS los elementos. Acabo de comprobarlo.
    • Gracias por decírmelo. Raro que quedó rota para siempre. Debido a que el «show de primer acordeón» contentAreas fue sólo hace referencia a la primera área de contenido, cuando es necesario hacer referencia a todo áreas de contenido. Me fijo que mediante la adición de un .end() para restablecer el selector.
    • Esta es una gran respuesta. He modificado el código para que cuando todos los paneles abiertos en la página de carga. Ojalá pudiera comprar una cerveza!
    • Sé que esto es realmente una respuesta anterior, pero estoy atascado con esta cosa ahora y que necesita ayuda. Me gusta mucho su violín, pero hay una manera de asegurarse de que cuando usted haga clic en un encabezado, el otro se cierra?
    • No estoy seguro de entender @DeA es que no es el comportamiento actual? Haga clic en cualquier encabezado de las otras secciones de cerca. Expandir a Todos, a continuación, haga clic en cualquier encabezado, todos ellos de cerca, pero el que hizo clic en volver a abrir.
    • Eso es cierto. Por defecto que es el comportamiento, pero en la que el violín, no se comportan de esa manera
    • Muchas gracias! Wow. Que realmente me ayudó. No me esperaba una respuesta de un viejo post. Pero, ¡gracias!

  2. 18

    Esta mi solución:

    Trabajando en el proyecto de la vida real.

       $(function () {
        $("#accordion").accordion({collapsible:true, active:false});
        $('.open').click(function () {
            $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
            $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
            $(this).hide();
            $('.close').show();
        });
        $('.close').click(function () {
            $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
            $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
            $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
            $(this).hide();
            $('.open').show();
        });
        $('.ui-accordion-header').click(function () {
            $('.open').show();
            $('.close').show();
        });
    });

    http://jsfiddle.net/bigvax/hEApL/

    • Hola bigvax, el jsfiddle enlace es genial, pero tengo algunos problemas con eso: aquí está la situación: 1) haga clic en la «sección 1» para abrirlo. 2) haga clic en «cerrar Todo» botón para cerrar la anteriormente sección abierta. 3) Ahora haga clic de nuevo la «sección 1», no se abre, en primer clic, usted tiene que hacer clic «dos veces». Traté de resolverlo, pero no podía. Puede usted por favor decirme cómo puedo solucionar este problema?
    • Yo tenía el mismo problema que @jeewan
    • Esta es la respuesta correcta. Gracias!
    • mismo aquí. por alguna razón no se cierra en el primer clic.
  3. 16

    Una gran cantidad de estos parecen ser demasiado complicado. He conseguido lo que quería con el siguiente:

    $(".ui-accordion-content").show();

    JSFiddle

    • Usted se me adelantó. Accidentalmente, he descubierto a mí mismo.
    • Me encanta tu solución, gracias por compartir.
    • $(«.ui-accordion-content»).slideDown(300);
    • Esto debe ser aceptado respuesta…
    • $(«.ui-accordion-content»).toggle(); //permite mostrar/ocultar el comportamiento. El único inconveniente es cualquier abre se cierra y viceversa.
  4. 5

    Al final he encontrado esto para ser la mejor solución teniendo en cuenta los requisitos:

    //Expand/Collapse all
    $('.accordion-expand-collapse a').click(function() {
        $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
        $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
        $(this).toggleClass('collapse');
        return false;
    });

    Actualizado JSFiddle Enlace: http://jsfiddle.net/ccollins1544/r8j105de/4/

    • Copia esto y ejecutar en su violín enlace, no funciona… Aquí está el código que funciona con su violín enlace ` $(‘.acordeón-ampliar-un»).click(function() { $(‘#acordeón .ui-accordion-encabezado:no(.ui-state-activo)’).next().slideToggle(); $(this).texto($(this).text() == ‘Expandir todo’ ? El desplome de todos’ : ‘Expand all’); $(this).toggleClass(‘colapso’); return false; });`
    • Lo que si hay es un anidada acordeón? Será este el código de trabajo?
  5. 3

    No creo que usted puede hacer esto con un acordeón, ya que está diseñado específicamente preservar la propiedad de que a más de un elemento se abrirá. Sin embargo, aunque usted dice que no quiere volver a implementar el acordeón, puede ser sobre la estimación de la complejidad.

    Considere el siguiente escenario donde tiene una pila vertical de elementos,

    ++++++++++++++++++++
    +     Header 1     +
    ++++++++++++++++++++
    +                  +
    +      Item 1      +
    +                  +
    ++++++++++++++++++++
    +     Header 2     +
    ++++++++++++++++++++
    +                  +
    +      Item 2      +
    +                  +
    ++++++++++++++++++++

    Si usted es perezoso se podría construir este uso de una tabla, de lo contrario, adecuadamente estilo DIVs, también trabajo.

    Cada uno de los elemento de bloques puede tener una clase de itemBlock. Al hacer clic en un encabezado hará que todos los elementos de la clase itemBlock se oculta ($(".itemBlock").hide()). Usted puede utilizar el jquery slideDown() función para expandir el elemento debajo de la cabecera. Ahora tenemos bastante implementado acordeón.

    Para expandir todos los elementos, sólo tiene que utilizar $(".itemBlock").show() o si desea que la animación, $(".itemBlock").slideDown(500). Para ocultar todos los elementos, sólo tiene que utilizar $(".itemBlock").hide().

    • Gracias, que bien puede ir con esto, si todo lo demás falla. Todavía mantiene la esperanza de una función que puede ser añadido junto con el estándar de Acordeón 🙂
    • Por desgracia, la «solamente 1 abra» es la funcionalidad de la fundamentales a la interfaz de usuario jquery acordeones, y no puede ser eliminado sin sobrescribir _create, lo que en realidad significa que se bifurcan el widget. He añadido una respuesta con todo resuelto para usted, sin embargo.
    • Me parece extraño que todo el widget sería necesario bifurcada. Me gustaría que toda la funcionalidad existente de la interfaz de usuario jQuery Accordion (cada parte de él, incluyendo sólo un panel abierto en un tiempo), pero la capacidad de ampliar todos los paneles con un botón. Tal vez esto es sólo una cuestión de desactivar el widget de acordeón completamente para representar todos los elementos uncollapsed?
    • Lo siento, no he entendido tu pregunta, ya que «Expandir todo» es mutuamente exclusiva a «sólo 1 abra». He modificado mi respuesta con un ejemplo, ya que «sólo 1 abra a menos que consiga expandir todo» es en realidad mucho más fácil de código para.
  6. 2

    Este es el código por Sinetheta convertido a un plugin de jQuery:
    Guardar a continuación el código en un archivo js.

    $.fn.collapsible = function() {
        $(this).addClass("ui-accordion ui-widget ui-helper-reset");
        var headers = $(this).children("h3");
        headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
        headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
        headers.click(function() {
            var header = $(this);
            var panel = $(this).next();
            var isOpen = panel.is(":visible");
            if(isOpen)  {
                panel.slideUp("fast", function() {
                    panel.hide();
                    header.removeClass("ui-state-active")
                        .addClass("ui-state-default")
                        .children("span").removeClass("ui-icon-triangle-1-s")
                            .addClass("ui-icon-triangle-1-e");
              });
            }
            else {
                panel.slideDown("fast", function() {
                    panel.show();
                    header.removeClass("ui-state-default")
                        .addClass("ui-state-active")
                        .children("span").removeClass("ui-icon-triangle-1-e")
                            .addClass("ui-icon-triangle-1-s");
              });
            }
        });
    }; 

    Consulte en su interfaz de usuario de la página y de la llamada similar a jQuery acordeón llamada:

    $("#accordion").collapsible(); 

    Se ve más limpio y evita cualquier tipo de clases para ser añadido a la marca.

  7. 1

    probar este jquery-multi-abrir-acordeón, podría ayudar a

    • Gracias por esto, me dio una oportunidad, pero, por desgracia, está muy fuera de fecha con la última jQuery/jQuery interfaz de usuario de la biblioteca y que no tiene compatibilidad con las últimas versiones.
    • puede probar este violín jsfiddle.net/AR57Y
    • Esto funciona muy bien, excepto que no han estándar acordeón funcionalidad (sólo un panel abierto al mismo tiempo). Me gustaría que coincida con la interfaz de usuario jQuery Accordion, pero también ofrecen un botón de sobrepaso para expandir todos los paneles.
    • a continuación, intente esto jsfiddle.net/CdWUd
    • De nuevo, casi! El acordeón ahora parece funcionar como normal, pero el «Expandir todo» enlace no correctamente expandir todos los paneles como el acordeón, y no cambiar a «cerrar todo» cuando se hace clic.
  8. 1

    La segunda bigvax comentario antes, pero usted necesita para asegurarse de que usted agregue

            jQuery("#jQueryUIAccordion").({ active: false,
                                  collapsible: true });

    de lo contrario, usted no será capaz de abrir el primer acordeón después de contraerlos.

        $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
       }
  9. 0
    Yes, it is possible. Put all div in separate accordion class as follows:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript">
    $(function () {
    $("input[type=submit], button")
    .button()
    .click(function (event) {
    event.preventDefault();
    });
    $("#tabs").tabs();
    $(".accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: 0
    });
    });
    function expandAll()
    {
    $(".accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: 0
    });
    return false;   
    }
    function collapseAll()
    {
    $(".accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: false
    });
    return false;
    }
    </script>
    <div class="accordion">
    <h3>Toggle 1</h3>
    <div >
    <p>text1.</p>
    </div>
    </div>
    <div class="accordion">
    <h3>Toggle 2</h3>
    <div >
    <p>text2.</p>
    </div>
    </div>
    <div class="accordion">
    <h3>Toggle 3</h3>
    <div >
    <p>text3.</p>
    </div>
    </div>
  10. 0

    He encontrado AlecRust solución bastante útil, pero puedo añadir algo para resolver un problema: Cuando usted haga clic en un solo de acordeón para expandirla y, a continuación, haga clic en el botón para ampliar, todos ellos serán abiertos. Pero, si vuelve a hacer clic sobre el botón de colapso, el único acordeón expandirse antes de que no se derrumbe.

    He usado imageButton, pero también se puede aplicar la lógica a los botones.

    /*** Expand all ***/
    $(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();
    return false;
    });
    /*** Collapse all ***/
    $(".collapseAll").click(function (event) {
    $('.accordion').accordion({
    collapsible: true,
    active: false
    });
    $('.accordion .ui-accordion-header').next().slideUp();
    return false;
    });

    También, si usted tiene acordeones en el interior de un acordeón y desea expandir todo, sólo en el segundo nivel, puede agregar una consulta:

    /*** Expand all Second Level ***/
    $(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();
    return false;
    });
  11. 0

    Utilizando un ejemplo para el Taifun,
    He modificado para permitir expandir y contraer.


    //gancho hasta el expandir/contraer todo

    var expandLink = $('.accordion-expand-all');
    expandLink.click(function () {
    $(".ui-accordion-content").toggle();
    });
    • claro solución

Dejar respuesta

Please enter your comment!
Please enter your name here