Frage jQuery UI Akkordeon Erweitern / Reduzieren Sie alle


Ich benutze die jQuery UI Akkordeon (was tut nicht zulassen, dass mehr als ein Element gleichzeitig geöffnet ist) an einem Projekt. Die Verwendung von Akkordeon ist angebracht, da ich normalerweise machen Ich möchte nur jeweils ein Panel geöffnet haben.

Ich muss jedoch einen Link "Alle erweitern" anbieten, der nach dem Klicken auf "Alles ausblenden" wechselt. Ich möchte keine nahezu identische Akkordeon-Funktionalität für diese eine Anforderung schreiben, also hätte ich gerne ein JS, das dies erreicht, während die Akkordeon-Komponente verwendet wird.

Frage: Was ist JavaScript / jQuery erforderlich, um dies zu erreichen, während die jQuery UI "Accordion" -Komponente verwendet wird, um die Standardfunktionalität zu nutzen?

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


30
2017-10-11 15:40


Ursprung


Antworten:


Wie besprochen In den jQuery UI-Foren sollten Sie keine Akkordeons verwenden.

Wenn Sie etwas wollen, das wie ein Akkordeon aussieht und sich verhält, ist das in Ordnung. Verwenden Sie ihre Klassen, um sie zu stylen und implementieren Sie die von Ihnen benötigte Funktionalität. Dann ist das Hinzufügen einer Schaltfläche zum Öffnen oder Schließen von allen ziemlich einfach. Beispiel

HTML

Durch die Verwendung der jquery-ui-Klassen sehen unsere Akkordeons genauso aus 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 wollen wir nur Akkordeon-Header, um den Zustand des folgenden Geschwisters umzuschalten, nämlich dessen Inhaltsbereich. Wir haben auch zwei benutzerdefinierte Ereignisse "show" und "hide" hinzugefügt, auf die wir später eingehen 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;
});

Erweitern / Reduzieren Sie alle

Wir verwenden einen booleschen Wert isAllOpen Flag zum Markieren, wenn die Schaltfläche geändert wurde, dies könnte genauso gut 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');
});

Tausche den Knopf wenn "alles offen"

Dank unserer benutzerdefinierten "show" - und "hide" -Ereignisse haben wir etwas zu hören, wenn sich die Panels verändern. Der einzige spezielle Fall ist "Sind sie alle offen", wenn ja, sollte der Button ein "Alles zusammenfalten" sein, wenn nicht, sollte es "Alles 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);
        } 
    }
});​

Für Kommentar bearbeiten: "1 Panel Open Only" zu behalten, es sei denn, Sie drücken die Schaltfläche "Alles erweitern" ist viel einfacher. Beispiel


48
2017-10-15 19:58



Das ist meine Lösung:

Arbeiten im realen 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
2018-04-05 16:38



Viele davon scheinen zu kompliziert zu sein. Ich habe erreicht, was ich wollte mit nur dem Folgenden:

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

JSFidel


9
2017-11-28 00:30



Am Ende fand ich dies die beste Lösung unter Berücksichtigung der Anforderungen:

// 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
2017-10-17 14:08



Ich glaube nicht, dass du das mit einem Akkordeon machen kannst, da es speziell dafür entwickelt wurde, die Eigenschaft zu erhalten, dass höchstens ein Gegenstand geöffnet wird. Auch wenn Sie sagen, dass Sie das Akkordeon nicht neu implementieren möchten, könnten Sie die Komplexität überschätzt haben.

Betrachten Sie das folgende Szenario, 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 mit einer Tabelle erstellen, ansonsten werden auch entsprechend gestaltete DIVs funktionieren.

Jeder der Objektblöcke kann eine Klasse von haben itemBlock. Wenn Sie auf eine Kopfzeile klicken, werden alle Elemente der Klasse itemBlock ausgeblendet ($(".itemBlock").hide()). Sie können dann die jQuery verwenden slideDown() Funktion, um den Eintrag unter der Kopfzeile zu erweitern. Jetzt haben Sie ziemlich viel Akkordeon implementiert.

Um alle Elemente zu erweitern, verwenden Sie einfach $(".itemBlock").show() oder wenn Sie es animiert haben wollen, $(".itemBlock").slideDown(500). Um alle Gegenstände zu verstecken, benutze einfach $(".itemBlock").hide().


3
2017-10-11 15:55



Hier ist der Code von Sinetheta in ein jQuery-Plugin umgewandelt: Speichern Sie den Code unterhalb einer 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 in Ihre Benutzeroberflächenseite und rufen Sie ähnlich wie bei jQuery accordian auf:

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

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


2
2018-02-24 05:52



Probier diese jquery-multi-open-Akkordeon, könnte dir helfen


1
2017-10-16 08:36



Ich habe einen zweiten Bigvax-Kommentar früher, aber Sie müssen sicherstellen, dass Sie hinzufügen

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

Andernfalls können Sie das erste Akkordeon nicht öffnen, nachdem Sie es zusammengeklappt haben.

    $('.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
2018-02-24 16:03



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
2018-01-15 11:10