ブートストラップの「折りたたみ」プラグインを使用して、リンクの長いリストのアコーディオンを作成しています。accordion-body タグには「collapse」が含まれているため、ページが読み込まれるとすべてのグループが折りたたまれます。グループを開いてリンクをクリックすると、新しいページに移動して詳細が表示されます。次に、戻るリンクをクリックするか、ブラウザを元に戻してリストに戻ります。残念ながら、戻ったときにアコーディオンは折りたたまれた状態に戻っているため、グループをもう一度開いて、元の場所を見つける必要があります。私はこの前後のナビゲーションの多くを予想しており、この動作は苛立たしいものになるでしょう.
ユーザーの場所を保持してそこに戻るか、ページのリロードや JavaScript の再起動を防ぐ方法はありますか。
解決策はこれらの線に沿っているのではないかと思いましたが、よくわかりません。 Twitter ブートストラップ: 開いているアコーディオンのタイトルにクラスを追加する
これは、クッキーによって非常に簡単に解決できます。以下の例で使用しているように、 https://github.com/carhartl/jquery-cookieのような単純化されたライブラリが多数あります。
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
次のコードをスクリプト セクションに追加します (#accordion2変更された 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>
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>
Jクエリ
$(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");
}
});
上記で提案した手法を試してみたところ、うまくいきましたが（一種）、 .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に感謝します。
これをありがとう、それは動作します。特定の DIV の表示/非表示状態を単純に保持するように少し変更しました (DIV のリストで 1 つの 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>