在页面刷新/导航上保留Twitter Bootstrap折叠状态 [英] Retain Twitter Bootstrap Collapse state on Page refresh/Navigation

问题描述

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

I'm using Bootstrap "collapse" plugin to make an accordion for a long list of links. The accordion-body tag includes "collapse" so all the groups are collapsed when the page loads. When you open a group and click on a link, it takes you to a new page to see some detail and then you click a back link or the browser back to return to the list. Unfortunately, when you return the accordion is back in its collapsed state and you have to open the group again and find where you were. I anticipate a lot of this back and forth navigation and this behavior is going to be frustrating.

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

Is there some way to preserve the user's place and go back to it, or just prevent the page from reloading or the javascript from firing again.

我认为解决方案可能是沿着这些方向，但不确定。
Twitter bootstrap：在课程中添加课程打开手风琴标题

I thought the solution might be along these lines, but not sure. Twitter bootstrap: adding a class to the open accordion title

推荐答案

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

You can very easily solve this by a cookie. There is a lot of simplified libraries, like https://github.com/carhartl/jquery-cookie as I use in the example below :

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

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

add the following code to a script section (#accordion2 refers to the modfied twitter bootstrap example, I list afterwards)

$(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 <上示例的修改版本/ a>带有可点击的链接，当你回去时 - 最后一个显示的手风琴组自动打开

And you are done! Here a modified version of the example at http://twitter.github.com/bootstrap/javascript.html#collapse with clickable links, when you go back - the last shown accordion group opens up automatically

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

这篇关于在页面刷新/导航上保留Twitter Bootstrap折叠状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！