Mantieni Twitter Bootstrap Comprimi stato su Aggiorna pagina/Navigazione

Question

Utilizzo il plug-in "comprimi" di Bootstrap per creare una fisarmonica per un lungo elenco di collegamenti. Il tag corpo della fisarmonica include "comprimi", quindi tutti i gruppi vengono compressi al caricamento della pagina. Quando apri un gruppo e fai clic su un link, ti ​​porta in una nuova pagina per vedere alcuni dettagli e quindi fai clic su un link o sul browser per tornare all'elenco. Sfortunatamente, quando ritorni la fisarmonica è di nuovo nel suo stato collassato e devi aprire nuovamente il gruppo e trovare dove ti trovavi. Anticipo molto questa navigazione avanti e indietro e questo comportamento sarà frustrante.

C'è un modo per preservare la posizione dell'utente e tornare ad esso, o semplicemente impedire il caricamento della pagina o il javascript di nuovo.

Ho pensato che la soluzione potrebbe essere lungo queste linee, ma non è sicuro. Twitter bootstrap: adding a class to the open accordion title

Answer 1

È possibile risolvere facilmente questo problema con un cookie. Ci sono un sacco di librerie semplificate, come https://github.com/carhartl/jquery-cookie come io uso nell'esempio seguente:

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

aggiungere il seguente codice a una sezione di script (#accordion2 riferisce all'esempio di bootstrap Twitter modfied, elenco in seguito)

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

E hai finito! Ecco una versione modificata dell'esempio a http://twitter.github.com/bootstrap/javascript.html#collapse con link cliccabili, quando si torna - l'ultimo gruppo di fisarmoniche mostrato apre automaticamente

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

Answer 2

ho provato la tecnica suggerita sopra e ha funzionato per me (o quasi), ma chiamando .collapse ("show") sembrava interrompere il comportamento di attivazione della fisarmonica in alcuni casi. L'apertura del primo pannello lascerebbe il pannello aperto in precedenza in stato aperto. Ho avuto intorno a questo con jQuery con l'aggiunta di classe "a" invece:

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

In caso contrario, grazie davidkonrad avermi messo sulla strada giusta.

Answer 3

Grazie per questo, l'ho trovato molto utile, ma se si utilizza Bootstrap 3 & ultima jQuery, questo funziona:

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

Spero che questo consente di risparmiare altri po 'di tempo ....

Answer 4

In Bootstrap 3.xx devi usare il seguente script per salvare l'ultimo stato aperto nei cookie.

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

Answer 5

Grazie per questo, funziona. L'ho modificato un po 'per mantenere semplicemente lo stato mostra/nascondi di uno specifico DIV (e non specifico per mostrare solo un DIV in un elenco di 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> 

Answer 6

Un'altra opzione disponibile consiste nell'utilizzare l'hash dell'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 = ''; 
    }); 
});