web-dev-qa-db-fra.com

Conserver l'état de réduction du bootstrap de Twitter lors de l'actualisation/navigation

J'utilise Bootstrap "collapse" plugin pour faire un accordéon pour une longue liste de liens. La balise accordéon-body inclut "collapse" afin que tous les groupes soient réduits lors du chargement de la page. Lorsque vous ouvrez un groupe et cliquez sur un lien, une nouvelle page s'affiche pour vous permettre de voir certains détails, puis vous cliquez sur un lien précédent ou sur le navigateur pour revenir à la liste. Malheureusement, quand vous retournez l'accordéon est de retour dans son état effondré et vous devez rouvrir le groupe et trouver où vous étiez. J'anticipe beaucoup de cette navigation en arrière et ce comportement va être frustrant.

Existe-t-il un moyen de préserver la place de l'utilisateur et d'y revenir, ou d'empêcher simplement le rechargement de la page ou le déclenchement du code JavaScript.

Je pensais que la solution allait dans ce sens, mais je ne savais pas trop . Twitter bootstrap: ajouter une classe au titre d'accordéon ouvert

javascriptjquerytwitter-bootstraptwitter-bootstrap-3
25
gnudle

Vous pouvez très facilement résoudre ce problème par un cookie. Il y a beaucoup de bibliothèques simplifiées, comme https://github.com/carhartl/jquery-cookie que j'utilise dans l'exemple ci-dessous:

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

ajoutez le code suivant à une section de script (#accordion2 fait référence à l'exemple d'amorçage Twitter modifié, que je liste par la suite)

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

Et vous avez terminé! Voici une version modifiée de l'exemple sur http://Twitter.github.com/bootstrap/javascript.html#collapse avec des liens cliquables, lorsque vous revenez en arrière - le dernier groupe d'accordéon affiché s'ouvre automatiquement

<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

Dans Bootstrap 3.x.x , vous devez utiliser le script suivant pour enregistrer le dernier état ouvert dans les cookies.

Marquage HTML 

<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

J'ai essayé la technique suggérée ci-dessus et cela a fonctionné pour moi (en quelque sorte) mais appeler .collapse ("show") a semblé briser le comportement de la bascule accordéon dans certains cas. Ouvrir le premier panneau laisserait le panneau précédemment ouvert à l'état ouvert. J'ai résolu ce problème avec jQuery en ajoutant la classe "in" à la place:

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

Sinon, merci davidkonrad de me mettre sur la bonne voie.

3
Devindra

Une autre option disponible consiste à utiliser le hachage de l'URL.

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

Merci pour ça, ça marche. Je l'ai un peu modifié pour simplement conserver l'état d'affichage/masquage d'un DIV spécifique (et non spécifique à l'affichage d'un seul DIV dans une liste de DIV).

<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

Merci pour cela, je l’ai trouvé très utile, mais si vous utilisez Bootstrap 3 & latest jquery, cela fonctionne: 

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

J'espère que cela sauve du temps aux autres .... 

0
ws8