我正在使用Bootstrap「摺疊」插件爲一長串鏈接製作手風琴。 accordion-body標籤包含「摺疊」，因此當頁面加載時所有組都會摺疊。當你打開一個組並點擊一個鏈接時，它會帶你到一個新的頁面來查看一些細節，然後你點擊一個後退鏈接或瀏覽器返回到列表。不幸的是，當您將手風琴歸還至摺疊狀態時，您必須再次打開該組並找出您的位置。我預計會有很多這種來回導航，這種行爲會令人沮喪。保留Twitter Bootstrap頁面刷新/導航摺疊狀態
是否有某種方法可以保留用戶的位置並返回到該位置，或者只是防止重新加載頁面或再次觸發javascript。
我認爲解決方案可能是沿着這些路線，但不知道。 Twitter bootstrap: adding a class to the open accordion title
你可以很容易地通過cookie解決這個問題。有很多簡化庫，就像https://github.com/carhartl/jquery-cookie正如我在下面的例子中使用：
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
下面的代碼添加到腳本部分（#accordion2指modfied Twitter的引導例子，我列出事後）
$(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>
謝謝，我還沒有嘗試過，但隨着你的解釋和聽到朋友的同樣建議，我認爲這是一條路。 – gnudle
這些項目必須有一個ID，我忘記提及 – davidkonrad
Bootstrap 3將事件名稱更新爲'shown.bs.collapse'（如下面的答案所示） – MatsLindh
我嘗試了技術建議上面，它的工作對我來說（在某種程度上），但調用.collapse（「show」）在某些情況下似乎打破了手風琴的切換行爲。打開第一塊麪板會使以前打開的面板處於打開狀態。我得到了這一輪與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 &最新的jQuery，這個工程：
$("#accordion").on('shown.bs.collapse', function()
{
...
});
希望這樣可以節省別人一段時間....
在Bootstrap 3.xx您必須使用以下腳本將最後一次打開狀態保存到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");
}
});
這是一個很好的答案，並且幫助了我很多，但我認爲你需要指出的是，你必須下載一個特殊的jquery插件才能讓cookie部分工作。我看到選擇的答案提到了這一點，但是當我看到你的答案直接與Bootstrap 3.x – Matt
或者只是使用localStorage而不是$ .cookie時，我得到了隧道視覺。 – mesosteros
您是否遇到過在進入內部頁面時第一次沒有保持打開狀態的問題？ – javapatriot
感謝這個，它的工作原理。我修改了一下，只是簡單地保留了特定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>
認爲你可以發佈一個jsfiddle頁面或類似的？我認爲你做了我想做的事，但我錯過了一些東西。 – user1337
另一個可用選項是使用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 = '';
});
});
你有沒有研究過使用哈希引用打開的手風琴？ – Sherbrow
以下是關於使用cookie記住手風琴早期狀態的相關項目：http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery/1458728#1458728 – gnudle
**更新： **這個問題是Bootstrap 2.xx，Bootstrap 3.xx是指我的答案。 – Ravimallya