Bootstrap stay аккордеон открыть страницу перезагрузить

Question

Как я могу сделать аккордеон и субкарнион оставаться открытым, если перезагрузить страницу (щелкнув один из элементов)? Должен ли я написать собственную функцию, чтобы сохранить открытые элементы при открытии их на перезагрузке страницы или это возможность со встроенным javascript bootstrap.

<div id="MainMenu"> 
<div class="list-group"> 
    <a href="#menu0" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Holz</a> 
    <div id="menu0" class="collapse"> 
     <a href="/products/index/11" class="list-group-subitem">A</a> 
     <a href="/products/index/12" class="list-group-subitem">B</a> 
     <a href="/products/index/13" class="list-group-subitem">C</a> 
     <a href="/products/index/14" class="list-group-subitem">D</a> 
     <a href="#menu0_1" class="list-group-subitem" data-toggle="collapse" data-parent="#MainMenu">E</a> 
     <div id="menu0_1" class="collapse"> 
      <a href="/products/index/15" class="list-group-subitem">E1</a> 
      <a href="/products/index/16" class="list-group-subitem">E2</a> 
     </div> 
    </div> 
</div> 

Answer 1

Вы можете использовать LocalStorage или печенье. Вот один пример с LocalStorage:

$(document).ready(function() { 
    $('a').click(function() { 
     //store the id of the collapsible element 
     localStorage.setItem('collapseItem', $(this).attr('href')); 
    }); 

    var collapseItem = localStorage.getItem('collapseItem'); 
    if (collapseItem) { 
     $(collapseItem).collapse('show') 
    } 
}) 

FIDDLE

Чтобы улучшить код, который вы можете использовать загрузочный коллапсы: http://getbootstrap.com/javascript/#collapse-usage, например:

$('#myCollapsible').on('show.bs.collapse', function() { 
    // store the id of the collapsible element 
    //.... 
}) 

Та же стратегия может быть использована с печеньем : https://github.com/carhartl/jquery-cookie