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