Bootstrap collapse を3つのパーツで想像してください
<div class="panel-group" id="accordion">
...
<div id="accordionOne" class="panel-heading"></div>
...
<div id="accordionTwo" class="panel-heading"></div>
...
<div id="accordionThree" class="panel-heading"></div>
</div>
プラグインが特定の HTTPフラグメント識別子 を開くようにする簡単な方法はありますか?
例http://myproject/url#accordionTwo
は2番目のアコーディオンを開きます
$("#accordionTwo").collapse('show');
指定されたHTTPフラグメント識別子を開くには、次のことを試してください。
$(document).ready(function() {
var anchor = window.location.hash;
$(".collapse").collapse('hide');
$(anchor).collapse('show');
});
編集:
コメントのbartで指摘されているように、ターゲティングに注意してください.collapse
これは、ビューポートがxs
の場合、このクラスがナビゲーションバーにも使用されるためです。
この行は正しいハッシュを開きます
location.hash && $(location.hash + '.collapse').collapse('show');
さらにもう1つのソリューションは、少し小さくコンパクトです。
$(document).ready(function() {
var anchor = window.location.hash;
$(anchor).collapse('toggle');
});
ハッシュルーティングを実装するための本当にシンプルで迅速な方法として、 Routie のようなものを試すことができます
routie({
accordionOne: function() {
$('#accordionOne').collapse('show');
},
accordionTwo: function() {
$('#accordionTwo').collapse('show');
},
accordionThree: function() {
$('#accordionThree').collapse('show');
}
});