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

Question

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

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

我认为解决方案可能是这样的，但不确定。 Twitter bootstrap：向打开的手风琴标题添加一个类

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 的示例的修改版本，带有可点击的链接，当您返回时 - 最后显示的手风琴组会自动打开

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

Answer 2

在 Bootstrap 3.x.x 中，您必须使用以下脚本将上次打开状态保存在 cookie 中。

HTML 标记

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible
                    Group Item #3 </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food
                truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
                a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim
                keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
                raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
                labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Jquery

  $(document).ready(function () {
        //when a group is shown, save it as the active accordion group
        $("#accordion").on('shown.bs.collapse', function () {
            var active = $("#accordion .in").attr('id');
            $.cookie('activeAccordionGroup', active);
          //  alert(active);
        });
        $("#accordion").on('hidden.bs.collapse', function () {
            $.removeCookie('activeAccordionGroup');
        });
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

Answer 3

我尝试了上面建议的技术，它对我有用（有点），但调用 .collapse("show") 似乎在某些情况下破坏了手风琴切换行为。打开第一个面板将使之前打开的面板保持打开状态。我用 jQuery 通过添加“in”类来解决这个问题：

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

否则，谢谢 davidkonrad 让我走上正轨。

Answer 4

谢谢你，它有效。我对其进行了一些修改，以简单地保留特定 DIV 的显示/隐藏状态（而不是特定于仅显示 DIV 列表中的一个 DIV）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script language="javascript" type="text/javascript">
    function retainDivCollapsedState(nameOfDiv, nameOfHeader) {
        // when the div is shown, save a cookie with a value of 'true'
        $("#" + nameOfDiv).on('shown.bs.collapse', function () {
            $.cookie(nameOfDiv, "true"); // this is a cookie.  named the same as the control (poor practice) for brevity 
        });
        // when the div is collapsed, remove the same cookie
        $("#" + nameOfDiv).on('hidden.bs.collapse', function () {
            $.removeCookie(nameOfDiv);
        });

        // on page load, show or hide the div (and stylized the header) according to the cookie (if it exists)
        var showDiv = $.cookie(nameOfDiv);
        if (showDiv != null) {
            $("#" + nameOfDiv).addClass("in");                      // The div to show
            $("#" + nameOfHeader).removeClass("collapsed");         // The header to stylize as expanded
        }
    };
</script>

<script language="javascript" type="text/javascript">
    $(document).ready(
        retainDivCollapsedState("divName", "divHeaderName")
    );
</script>

Answer 5

另一个可用选项是使用 url 哈希。

$(document).ready(function () {
    var hash = window.location.hash;
    if (hash) {
        $("#accordion .panel-collapse").removeClass('in');
        $(hash).addClass('in');
    }

    $('#accordion').on('shown.bs.collapse', function () {
        var activeId = $("#accordion .in").attr('id');
        window.location.hash = activeId;
    });

    $('#accordion').on('hidden.bs.collapse', function () {
        window.location.hash = '';
    });
});

Answer 6

更新答案

好吧，伙计们，所以我投入了一些时间试图让它发挥作用。主要是因为我找到的所有答案都非常旧并且没有更新。

这适用于：

引导程序 3.x.x
引导程序 4.x.x
引导5.x.x

注意： cookie 已更新到新的 Github 存储库 https://github.com/js-cookie/js-cookie 用法已更改，例如，现在的

$.cookie('name');

是

Cookies.get('name');

包括

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

脚本

$(document).ready(function() {

      var last=Cookies.get('activeAccordionGroup');

      if (last!=null) {
          //remove default collapse settings
          $("#accordion .collapse").removeClass('show');
          //show the last visible group
          $("#"+last).collapse("show");
      }
 });

 //when a group is shown, save it as the active accordion group
 $("#accordion").bind('shown.bs.collapse', function() {
      var active=$("#accordion .show").attr('id');
      Cookies.set('activeAccordionGroup', active);
  });

变化：

Bootstrap 事件不再是
```
shown
```
，而是
```
shown.bs.collapse
```
Cookie 的使用

手风琴 HTML

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Answer 7

对于那些没有/不想使用 jQuery/$ 的人，这是适合我的 Vanilla Javascript 版本（Bootstrap 版本 5）：

<script defer type="text/javascript">
  window.addEventListener('load',
    function () {
      document.querySelectorAll(".store-collapse").forEach(function (el) {
          el.addEventListener("shown.bs.collapse", function () {
              localStorage.setItem("coll_" + el.id, true);
              console.log('SHOW ' + el.id + "$");
          })
      });
      document.querySelectorAll(".store-collapse").forEach(function (el) {
          el.addEventListener("hidden.bs.collapse", function () {
              localStorage.setItem("coll_" + el.id, false);
              console.log('HIDE '+ el.id + "$");
          })
      });
  
      document.querySelectorAll(".store-collapse").forEach(function (el) {
          console.log('EACH ' + el.id);
          if (localStorage.getItem("coll_" + el.id) === "true") {
              console.log('INIT SHOW '+ el.id);
              el.classList.remove("collapse")
          } else if (localStorage.getItem("coll_" + el.id) === "false") {
              console.log('INIT HIDE '+ el.id);
              el.classList.add("collapse")
          }
      });
  }, false);
</script>

一些解释：

```
store-collapse
```
类，以便精确选择我想要启用在本地存储中保存/恢复折叠状态的元素。示例：

    <div class="store-collapse" id="status_table"> 
      <table class="table">
      ...
    </div>
    
    <div class="store-collapse" id="info_table"> 
      <table class="table">
      ...
    </div>

我没有调用一些 Bootstrap Javascript 代码/实例化对象，而是选择使用 Bootstrap 类 - 而且它的工作没有任何问题。

参考资料：

Answer 8

谢谢你，发现它非常有帮助，但是如果您使用 Bootstrap 3 和最新的 jquery，这可以工作：

$("#accordion").on('shown.bs.collapse', function()
{
   ...
});

希望这可以节省其他人一些时间......

Answer 9

如果有人仍然感兴趣，这里有我经过测试的 Bootstrap 5.3 代码

 <script defer type="text/javascript">
    window.addEventListener('load',
        function() {
            document.querySelectorAll(".store-collapse").forEach(function(el) {
                el.addEventListener("shown.bs.collapse", function() {
                    localStorage.setItem("coll_" + el.id, true);
                    console.log('SHOW ' + el.id + "$");
                })
            });
            document.querySelectorAll(".store-collapse").forEach(function(el) {
                el.addEventListener("hidden.bs.collapse", function() {
                    localStorage.setItem("coll_" + el.id, false);
                    console.log('HIDE ' + el.id + "$");
                })
            });

            document.querySelectorAll(".store-collapse").forEach(function(el) {
                console.log('EACH ' + el.id);
                if (localStorage.getItem("coll_" + el.id) === "true") {
                    console.log('INIT SHOW ' + el.id);
                    el.classList.add("show")
                } else if (localStorage.getItem("coll_" + el.id) === "false") {
                    console.log('INIT HIDE ' + el.id);
                    el.classList.remove("show")
                }
            });
        }, false);
</script>

Answer 10

关于@JonatanRek 的答案。我对“折叠”类做了一个小调整，使用“显示”效果更好：


function store_state(el, state) {
  localStorage.setItem("coll_" + el.id, state);
}

function restore_initial_state() {
  document.querySelectorAll(".store-collapse").forEach(function (el) {
    let itemState = localStorage.getItem("coll_" + el.id)
    let show = (itemState === "true")
    if (itemState && show) {
      el.classList.add("show")
    }
  });
}

window.addEventListener('load', () => {
  restore_initial_state()
}, false)

document.querySelectorAll(".store-collapse").forEach(function (el) {
  el.addEventListener('hidden.bs.collapse', function () {
    store_state(el, false) // hide
  });
  el.addEventListener('shown.bs.collapse', function () {
    store_state(el, true) // show
  });
});

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

问题描述投票：0回答：10

10个回答

更新答案

最新问题

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

问题描述 投票：0回答：10

10个回答

更新答案

最新问题

问题描述投票：0回答：10