it-swarm.com.de

jQuery UI Accordion Alles anzeigen/ausblenden

Ich verwende das jQuery UI-Akkordeon (was nicht zulässt, dass mehr als ein Element gleichzeitig geöffnet ist ) für ein Projekt. Die Verwendung von Akkordeon ist angemessen, da ich normalerweise tun immer nur ein Fenster gleichzeitig öffnen möchte.

Ich muss jedoch einen Link "Alle erweitern" anbieten, der beim Klicken auf "Alle reduzieren" wechselt. Ich möchte keine nahezu identische Akkordeonfunktionalität für diese eine Anforderung schreiben, also möchte ich einige JS, die dies erreichen, während die Akkordeonkomponente weiterhin verwendet wird.

Frage: Welches JavaScript/jQuery wird benötigt, um dies zu erreichen, während die "Accordion" -Komponente der jQuery-Benutzeroberfläche weiterhin zur Stromversorgung der Standardfunktionalität verwendet wird?

Hier ist eine Geige: http://jsfiddle.net/alecrust/a6Cu7/

32
AlecRust

Am Ende habe ich festgestellt, dass dies die beste Lösung ist, wenn man die Anforderungen berücksichtigt:

// 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;
});
5
AlecRust

Wie bereits erwähnt in den jQuery UI-Foren sollten Sie dafür keine Akkordeons verwenden. 

Wenn Sie etwas möchten, das wie ein Akkordeon aussieht und wirkt, ist das in Ordnung. Verwenden Sie ihre Klassen, um sie zu stylen, und implementieren Sie die gewünschte Funktionalität. Dann ist das Hinzufügen einer Schaltfläche zum Öffnen oder Schließen ganz einfach. Beispiel

HTML

Durch die Verwendung der Jquery-ui-Klassen halten wir unsere Akkordeons genauso wie die "echten" Akkordeons.

<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>​

Rollen Sie Ihre eigenen Akkordeons

Meistens möchten wir nur, dass Akkordeon-Header den Status des folgenden Geschwisters, dh des Inhaltsbereichs, umschalten. Wir haben auch zwei benutzerdefinierte Ereignisse "show" und "hide" hinzugefügt, an die wir uns später anschließen werden.

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

Alles erweitern/reduzieren

Wir verwenden ein boolesches isAllOpen-Flag, um zu markieren, wenn die Schaltfläche geändert wurde. Dies könnte genauso leicht eine Klasse oder eine Statusvariable in einem größeren Plugin-Framework gewesen sein.

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

Tauschen Sie die Schaltfläche aus, wenn "alle geöffnet" sind

Dank unserer benutzerdefinierten "show" - und "hide" -Ereignisse haben wir etwas zu beachten, wenn sich die Panels ändern. Der einzige Sonderfall ist "Sind sie alle offen", wenn ja, sollte die Schaltfläche "Alle reduzieren" sein, andernfalls sollte es "Alle erweitern" sein.

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

Bearbeiten für Kommentar: "1 Panel open only" beizubehalten, sofern Sie nicht auf die Schaltfläche "Alle erweitern" klicken, ist tatsächlich viel einfacher. Beispiel

50
Sinetheta

Dies ist meine Lösung:

Arbeit in einem echten Projekt.

   $(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/

18
bigvax

Viele von ihnen scheinen zu kompliziert zu sein. Ich habe erreicht, was ich wollte:

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

JSFiddle

16
Charles Clayton

Ich glaube nicht, dass Sie dies mit einem Akkordeon machen können, da es speziell entworfen wurde, um die Eigenschaft zu erhalten, dass höchstens ein Element geöffnet wird. Auch wenn Sie sagen, dass Sie Akkordeon nicht erneut implementieren möchten, schätzen Sie möglicherweise die Komplexität ein. 

Stellen Sie sich das folgende Szenario vor, in dem Sie einen vertikalen Stapel von Elementen haben. 

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

Wenn Sie faul sind, können Sie dies aus einem Tisch bauen, ansonsten funktionieren auch entsprechend gestaltete DIVs. 

Jeder der Elementblöcke kann eine Klasse von itemBlock haben. Durch Klicken auf einen Header werden alle Elemente der Klasse itemBlock ausgeblendet ($(".itemBlock").hide()). Sie können dann die Funktion jquery slideDown() verwenden, um das Element unter der Kopfzeile zu erweitern. Jetzt hast du ziemlich viel Akkordeon implementiert. 

Um alle Elemente zu erweitern, verwenden Sie einfach $(".itemBlock").show() oder wenn Sie animiert werden möchten, $(".itemBlock").slideDown(500). Um alle Elemente auszublenden, verwenden Sie einfach $(".itemBlock").hide().

3
PhilDin

Hier ist der Code von Sinetheta , konvertiert in ein jQuery-Plugin: Speichern Sie den folgenden Code in eine js-Datei. 

$.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");
          });
        }
    });
}; 

Verweisen Sie es auf Ihrer UI-Seite und rufen Sie ähnlich wie jQuery accordian call auf: 

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

Sieht sauberer aus und vermeidet, dass Klassen zum Markup hinzugefügt werden.

2
Ullas Antony

probieren Sie dieses jquery-multi-open-Akkordeon aus, es könnte Ihnen helfen

1
rajesh kakawat

Ich habe den zweiten Bigvax-Kommentar früher veröffentlicht, aber Sie müssen sicherstellen, dass Sie hinzufügen 

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

andernfalls können Sie das erste Akkordeon nach dem Zusammenbruch nicht öffnen. 

    $('.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();
   }
1
craig_nelson

Ich fand die Lösung von AlecRust sehr hilfreich, aber ich füge etwas hinzu, um ein Problem zu lösen: Wenn Sie auf ein einzelnes Akkordeon klicken, um es zu erweitern, und dann auf die Schaltfläche zum Erweitern klicken, werden sie alle geöffnet. Wenn Sie jedoch erneut auf die Schaltfläche klicken, um zu kollabieren, wird die Erweiterung des einzelnen Akkordeons vor dem Zusammenbruch nicht ausgeblendet.

Ich habe imageButton verwendet, aber Sie können diese Logik auch auf Schaltflächen anwenden.

/*** 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;
});

Wenn Sie Akkordeons in einem Akkordeon haben und alle nur auf dieser zweiten Ebene erweitern möchten, können Sie eine Abfrage hinzufügen:

/*** 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;
});
0
Freelex

Anhand eines Beispiels für Taifun, Ich habe modifiziert, um zu erweitern und zu reduzieren.

... // das Expandieren/Reduzieren von allen

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
0
NCR

Sie können dieses leichte, kleine Plugin ausprobieren.

Sie können es entsprechend Ihrer Anforderungen anpassen. Es wird eine Expand/Collapse-Funktion haben.

URL: _ ​​http://accordion-cd.blogspot.com/

0
Dharam Mali
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>
0
Manish Ojha