在页面刷新/导航时保留 Twitter Bootstrap 折叠状态

我正在使用 Bootstrap“折叠”插件为一长串链接制作一个手风琴。 Accordion-body 标签包含“collapse”，因此页面加载时所有组都会折叠。当您打开一个组并单击链接时，它会将您带到一个新页面以查看一些详细信息，然后单击后退链接或浏览器返回以返回到列表。不幸的是，当您返回时，手风琴又回到折叠状态，您必须再次打开组并找到您所在的位置。我预计会有很多这样的来回导航，这种行为将会令人沮丧。

有没有某种方法可以保留用户的位置并返回到它，或者只是阻止页面重新加载或 javascript 再次触发。

我认为解决方案可能是沿着这些思路，但不确定。Twitter bootstrap：向开放式手风琴标题添加一个类 https://stackoverflow.com/questions/10918801/twitter-bootstrap-adding-a-class-to-the-open-accordion-title

您可以通过 cookie 轻松解决此问题。有很多简化的库，例如https://github.com/carhartl/jquery-cookie https://github.com/carhartl/jquery-cookie正如我在下面的示例中使用的：

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

将以下代码添加到脚本部分（#accordion2指的是修改后的 twitter bootstrap 示例，我在后面列出）

$(document).ready(function() {
    var last=$.cookie('activeAccordionGroup');
    if (last!=null) {
        //remove default collapse settings
        $("#accordion2 .collapse").removeClass('in');
        //show the last visible group
        $("#"+last).collapse("show");
    }
});

//when a group is shown, save it as the active accordion group
$("#accordion2").bind('shown', function() {
    var active=$("#accordion2 .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

你就完成了！这是示例的修改版本，位于http://twitter.github.com/bootstrap/javascript.html#collapse http://twitter.github.com/bootstrap/javascript.html#collapse带有可点击的链接，当您返回时 - 最后显示的手风琴组会自动打开

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Link : <a href="http://google.com">google.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://stackoverflow.com">stackoverflow.com</a>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        Link : <a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>
      </div>
    </div>
  </div>
</div>