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

Question

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

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

我认为解决方案可能是这样的，但不确定。 Twitter bootstrap: adding a class to the open accordion title

Answer 1

你可以很容易地通过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带有可点击的链接，当您返回时 - 最后显示的 Accordion 组会自动打开

<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>