我正在使用Bootstrap“collapse”插件为一长串链接制作手风琴。 accordion-body标签包含“折叠”，因此页面加载时所有组都会折叠。当您打开一个组并单击一个链接时，它会将您带到一个新页面以查看一些详细信息，然后单击后一个链接或浏览器返回该列表。不幸的是，当你返回时，手风琴回到了折叠状态，你必须再次打开这个组并找到你的位置。我期待很多这种来回导航，这种行为将令人沮丧。
是否有某种方法可以保留用户的位置并返回到该位置，或者只是阻止重新加载页面或重新启动javascript。
我认为解决方案可能是沿着这些方向，但不确定。 Twitter bootstrap: adding a class to the open accordion title
答案 0 :(得分：25)
您可以通过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>
答案 1 :(得分：14)
在 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");
}
});
答案 2 :(得分：3)
我尝试了上面建议的技术，它对我有用（有点）但是调用.collapse（“show”）似乎在某些情况下打破了手风琴切换行为。打开第一个面板会使先前打开的面板处于打开状态。我通过添加类“in”代替了jQuery：
$(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让我走上正轨。
答案 3 :(得分：2)
另一个可用选项是使用url hash。
$(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 = '';
});
});
答案 4 :(得分：1)
谢谢你，它有效。我修改了一下以简单地保留特定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>
答案 5 :(得分：0)
多亏了这一点，发现它非常有用，但是如果你使用的是Bootstrap 3＆amp;最新的jquery，这是有效的：
$("#accordion").on('shown.bs.collapse', function()
{
...
});
希望这能节省一些时间......
答案 6 :(得分：0)
好的，伙计们，所以我投入了一些时间来让它发挥作用。主要是因为我找到的所有答案都超旧且未更新。
这将适用于：
注意： 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);
});
变化：
shown，而是 shown.bs.collapse手风琴 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>