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

几分钟前我遇到了同样的问题.解决方案似乎很简单 - 你需要解析一个URL并in使用它的id将类添加到matchable手风琴:

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