Bootstrap 3 從 URL 擴展手風琴

Question

使用 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');
}

提前致謝。 任何幫助，將不勝感激。

Answer 1

在 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>

Answer 2

幾分鍾前我遇到了同樣的問題。 該解決方案似乎是直截了當-你需要解析的網址，並添加類in的可匹配手風琴，使用ID：

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

在 Bootstrap 3.1.1 中測試和工作。

Answer 3

使用Bootstrap 4.4 ，只需將這一行添加到我的 JS 代碼中（在文檔就緒子句中）似乎就可以解決問題：

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

Answer 4

我在 Yii2 中將它與 Collapse 小部件一起使用。 為您的面板分配一個 id。
如果您有純 html，您只需在 a-tag 中添加一個 id 並更新選擇器。

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

Answer 5

只是對 Ilia R 的回應。 他的解決方案效果很好！ 不過，唯一的問題是面板標題樣式沒有更新（需要從面板標題鏈接中刪除 .collapsed 類），所以我稍微調整了 Ilia R 的代碼。 有人可能有更好/更清潔的解決方案，但這是一個開始。

        $(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');
            }
        });

Answer 6

對我來說工作：

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