web-dev-qa-db-ja.com

Bootstrap折りたたむ-指定されたIDフラグメントを開きます

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番目のアコーディオンを開きます

javascripthtmltwitter-bootstrapfragment-identifier
20
Pierre de LESPINAY
$("#accordionTwo").collapse('show');

指定されたHTTPフラグメント識別子を開くには、次のことを試してください。

$(document).ready(function() {
    var anchor = window.location.hash;
    $(".collapse").collapse('hide');
    $(anchor).collapse('show');
});

編集：

コメントのbartで指摘されているように、ターゲティングに注意してください.collapseこれは、ビューポートがxsの場合、このクラスがナビゲーションバーにも使用されるためです。

34
fxbt

この行は正しいハッシュを開きます

location.hash && $(location.hash + '.collapse').collapse('show');
8
neillh

さらにもう1つのソリューションは、少し小さくコンパクトです。

$(document).ready(function() {
  var anchor = window.location.hash;
  $(anchor).collapse('toggle');
});
5
Brezelfelder

ハッシュルーティングを実装するための本当にシンプルで迅速な方法として、 Routie のようなものを試すことができます

routie({
    accordionOne: function() {
        $('#accordionOne').collapse('show');
    },
    accordionTwo: function() {
        $('#accordionTwo').collapse('show');
    },
    accordionThree: function() {
        $('#accordionThree').collapse('show');
    }
});
2
Kelvin