web-dev-qa-db-ja.com

Bootstrap 3URLからアコーディオンを展開

Bootstrap 3）を使用して、サブナビゲーションアンカーリンク（つまり、index.php＃wnsh）を使用して、指定されたアコーディオンを展開し、ページをコンテンツにアンカーしようとしています。例を検索しようとしましたが、運が悪かったのは、おそらく私のアコーディオン構造が特定のBS3の例と異なるためです。これが私のHTMLです。

更新：

コードにいくつかの更新を行いましたが、それでもハッシュで指定されたアコーディオンを開いていません。それ以上の考えはありますか？

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

[〜＃〜] js [〜＃〜]

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow');
}

前もって感謝します。どんな助けでもいただければ幸いです。

javascripthashtwitter-bootstrap-3anchoraccordion
13
robotsmeller

Bootstrap 3.3.5でテストおよび動作しています。

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $('.collapse').removeClass('in');
        $(location.hash + '.collapse').collapse('show');
    }
});
</script>
17
Thiago Montini

ほんの数分前に同じ問題が発生しました。解決策は簡単なようです-[〜＃〜] url [〜＃〜]を解析し、クラスinを一致するアコーディオンに追加する必要があります、そのidを使用：

_// Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}
_

Bootstrap 3.1.1でテストおよび動作しています。

16
Ilia Rostovtsev

これをYii2のCollapseウィジェットで使用しています。パネルにIDを割り当てます。
プレーンHTMLを使用している場合は、aタグにIDを追加して、セレクターを更新するだけです。

$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find('a').click();
    }
});
1
Ruben

イリアRへの単なる応答。彼の解決策はうまくいきました！ただし、唯一のことは、パネルのタイトルスタイルが更新されていないことでした（.collapsedクラスをパネルのタイトルリンクから削除する必要がありました）。そこで、IliaRのコードを少し調整しました。誰かがおそらくより良い/よりクリーンな解決策を持っていますが、ここからが始まりです。

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match('#') ) {
                $('#'+url.split('#')[1]).addClass('in');
                var cPanelBody = $('#'+url.split('#')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass('collapsed');
            }
        });
0
Ryan Dorn

Bootstrap 4.4の場合、この1行をJSコード（ドキュメントの準備完了句内）に追加するだけでうまくいくようです。

if(location.hash != null && location.hash != ""){$(location.hash + '.collapse').collapse('show');}
0
Ben in CA

私のために働いた：

    $(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var cPanelBody = $('#'+url.split('#')[1]);
            cPanelBody.find(".panel-title a")[0].click();
        }
    });
0
Jafix