jquery - Bootstrap保持 Accordion 打开页面重新加载

Question

如果重新加载页面(单击其中一项)，如何使 Accordion 和子 Accordion 保持打开状态？我是否必须编写一个自己的函数来保存在页面重新加载时打开的项目，或者使用 Bootstrap 的内置 javascript 可以实现这一点。

<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 或 cookie。以下是 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

要改进代码，您可以使用 Bootstrap 崩溃事件: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