Question

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

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

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

1 个答案: