it-swarm.com.de

Beibehalten des Status von Twitter Bootstrap Collapse bei Seitenaktualisierung/Navigation

Ich verwende das Bootstrap-Plugin "collapse", um ein Akkordeon für eine lange Liste von Links zu erstellen. Das Akkordeon-Body-Tag enthält "collapse", sodass alle Gruppen beim Laden der Seite reduziert werden. Wenn Sie eine Gruppe öffnen und auf einen Link klicken, gelangen Sie zu einer neuen Seite, um Details anzuzeigen, und klicken Sie dann auf einen Link oder den Browser, um zur Liste zurückzukehren. Wenn Sie zurückkehren, befindet sich das Akkordeon leider wieder im eingestürzten Zustand und Sie müssen die Gruppe erneut öffnen und herausfinden, wo Sie sich befanden. Ich erwarte viel von dieser Hin- und Her-Navigation, und dieses Verhalten wird frustrierend sein.

Gibt es eine Möglichkeit, den Platz des Benutzers zu erhalten und dorthin zurückzukehren, oder verhindern Sie, dass die Seite erneut geladen wird oder das Javascript erneut ausgelöst wird.

Ich dachte, die Lösung könnte in diese Richtung gehen, aber nicht sicher .. _. Twitter-Bootstrap: Hinzufügen einer Klasse zum offenen Akkordeon-Titel

25
gnudle

Sie können dies sehr leicht mit einem Cookie lösen. Es gibt viele vereinfachte Bibliotheken wie https://github.com/carhartl/jquery-cookie , wie ich sie im folgenden Beispiel verwende:

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

fügen Sie einem Skriptabschnitt den folgenden Code hinzu (#accordion2 bezieht sich auf das modifizierte Twitter-Bootstrap-Beispiel, ich liste es danach auf)

$(document).ready(function() {
    var last=$.cookie('activeAccordionGroup');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion2 .collapse").removeClass('in');
        //show the last visible group
        $("#"+last).collapse("show");
    }
});

//when a group is shown, save it as the active accordion group
$("#accordion2").bind('shown', function() {
    var active=$("#accordion2 .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

Und du bist fertig! Hier eine modifizierte Version des Beispiels unter http://Twitter.github.com/bootstrap/javascript.html#collapse mit anklickbaren Links, wenn Sie zurückgehen - die zuletzt angezeigte Akkordeongruppe wird automatisch geöffnet

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Link : <a href="http://google.com">google.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://stackoverflow.com">stackoverflow.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>
      </div>
    </div>
  </div>
</div>
25
davidkonrad

In Bootstrap 3.x.x müssen Sie das folgende Skript verwenden, um den zuletzt geöffneten Status in Cookies zu speichern.

HTML Markup

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
                    Group Item #3 </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Jquery

  $(document).ready(function () {
        //when a group is shown, save it as the active accordion group
        $("#accordion").on('shown.bs.collapse', function () {
            var active = $("#accordion .in").attr('id');
            $.cookie('activeAccordionGroup', active);
          //  alert(active);
        });
        $("#accordion").on('hidden.bs.collapse', function () {
            $.removeCookie('activeAccordionGroup');
        });
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });
13
Ravimallya

Ich habe die oben vorgeschlagene Technik ausprobiert und sie funktionierte für mich (irgendwie), aber der Aufruf von .collapse ("show") schien in einigen Fällen das Verhalten des Akkordeonumschalters zu beeinträchtigen. Wenn Sie das erste Panel öffnen, bleibt das zuvor geöffnete Panel im geöffneten Zustand. Ich habe das mit jQuery umgangen, indem ich stattdessen die Klasse "in" hinzugefügt habe:

$(document).ready(function() {
    var last=$.cookie('activeAccordionGroup');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion .panel-collapse").removeClass('in');
        //show the account_last visible group
        $("#" + last).addClass("in");
    }
});

Ansonsten danke davidkonrad, dass ich auf dem richtigen Weg bin.

3
Devindra

Eine weitere verfügbare Option ist die Verwendung des URL-Hashs.

$(document).ready(function () {
    var hash = window.location.hash;
    if (hash) {
        $("#accordion .panel-collapse").removeClass('in');
        $(hash).addClass('in');
    }

    $('#accordion').on('shown.bs.collapse', function () {
        var activeId = $("#accordion .in").attr('id');
        window.location.hash = activeId;
    });

    $('#accordion').on('hidden.bs.collapse', function () {
        window.location.hash = '';
    });
});
1
kheit

Danke dafür, es funktioniert. Ich habe es etwas modifiziert, um einfach den show/hide-Status eines bestimmten DIV beizubehalten (und nicht speziell für das Anzeigen nur eines DIV in einer Liste von DIVs).

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script language="javascript" type="text/javascript">
    function retainDivCollapsedState(nameOfDiv, nameOfHeader) {
        // when the div is shown, save a cookie with a value of 'true'
        $("#" + nameOfDiv).on('shown.bs.collapse', function () {
            $.cookie(nameOfDiv, "true"); // this is a cookie.  named the same as the control (poor practice) for brevity 
        });
        // when the div is collapsed, remove the same cookie
        $("#" + nameOfDiv).on('hidden.bs.collapse', function () {
            $.removeCookie(nameOfDiv);
        });

        // on page load, show or hide the div (and stylized the header) according to the cookie (if it exists)
        var showDiv = $.cookie(nameOfDiv);
        if (showDiv != null) {
            $("#" + nameOfDiv).addClass("in");                      // The div to show
            $("#" + nameOfHeader).removeClass("collapsed");         // The header to stylize as expanded
        }
    };
</script>

<script language="javascript" type="text/javascript">
    $(document).ready(
        retainDivCollapsedState("divName", "divHeaderName")
    );
</script>
1
dankeshawn

Vielen Dank dafür, es hat mir sehr geholfen, aber wenn Sie Bootstrap 3 & neueste Jquery verwenden, funktioniert das: 

$("#accordion").on('shown.bs.collapse', function()
{
   ...
});

Hoffe, das erspart anderen etwas Zeit .... 

0
ws8