Bootstrap 保持手风琴打开页面重新加载

Question

如果重新加载页面（单击其中一项），如何使手风琴和子手风琴保持打开状态？我是否必须编写一个自己的函数来保存在页面重新加载时打开它们时打开的项目，或者是否可以使用 bootstrap.js 的内置 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')
    }
})

小提琴

要改进代码，您可以使用引导程序崩溃事件：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