Загрузки остаются открытыми аккордеон перезагрузки страницы

Как я могу сделать аккордеон и суб-аккордеон открытыми, если перезагрузить страницу (нажав на один из элементов)? Должен ли я написать собственную функцию для сохранения элементов, которые открыты при открытии их на странице перезагрузки или это возможность со встроенным 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>

1 3
jquery twitter-bootstrap accordion

1 ответ:

Вы можете использовать LocalStorage или cookies. Вот один пример с 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')
    }
})

Скрипка

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

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

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

3