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

查看：25
本文介绍了在页面刷新/导航时保留 Twitter Bootstrap 折叠状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

有什么方法可以保留用户的位置并返回到它，或者只是防止页面重新加载或 javascript 再次触发.

我认为解决方案可能是这样的，但不确定.Twitter 引导程序:向打开的手风琴标题添加一个类

解决方案

您可以通过 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');如果(最后！=空){//删除默认的折叠设置$("#accordion2 .collapse").removeClass('in');//显示最后一个可见组$("#"+last).collapse("show");}});//当显示组时，将其保存为活动的手风琴组$("#accordion2").bind('shown', function() {var active=$("#accordion2 .in").attr('id');$.cookie('activeAccordionGroup', 活动)});

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

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">可折叠组项目 #1</a>
<div id="collapseOne" class="accordion-body 折叠在"><div class="accordion-inner">链接:<a href="http://google.com">google.com</a>

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">可折叠组项目 #2</a>

<div id="collapseTwo" class="accordion-body collapse"><div class="accordion-inner">链接:<a href="http://stackoverflow.com">stackoverflow.com</a>

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">可折叠组项目 #3</a>

<div id="collapseThree" class="accordion-body collapse"><div class="accordion-inner">链接:<a href="http://cryptozoologynews.blogspot.com/">cryptozoology news</a>

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.

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.

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

解决方案

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>

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)
});

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆