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

提前致谢。任何帮助都将不胜感激。

- robotsmeller

---

你是否缺少过渡插件，因为它在我这里运行良好。请查看这个fiddle。 - Pitamber Tiwari

有一个过渡插件。我正在尝试通过URL哈希标签打开特定的手风琴，例如page.html＃cs。实际的手风琴功能对我来说运行良好。 - robotsmeller

我认为你可以编写在页面准备就绪后运行的JavaScript代码。你可以使用 window.location.hash 获取hashtag，并像我在更新的fiddle中所做的那样执行一些操作。 - Pitamber Tiwari

感谢@pitamber-tiwari的回复，我尝试了你的代码，虽然它可以使用硬编码的哈希值，但无法使用window.location.hash，并且第一个手风琴在页面加载时也没有打开。 - robotsmeller

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>

- Thiago Montini

Answer 2

我几分钟前遇到了同样的问题。解决方案似乎很简单 - 你需要解析一个URL并在可匹配手风琴中使用它的id，添加类in：

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

已在Bootstrap 3.1.1中进行测试并正常工作。

- Ilia

---

这对我有帮助，但我想补充一下：var url = document.location.toString(); if ( url.match('#') ) { $('#'+url.split('#')[1]).collapse('show'); }是为了获得 JavaScript 效果。 - dumP

为什么我们没有使用window.location.hash？ - Lazarus

@dumP 你所说的“获取JavaScript效果”是什么意思？是指哪种效果？ - bart

@dumP 我编辑了答案，包括你使用 Bootstrap 的方法（在我看来是首选的方法）。 - Eric Steinborn

这个运行良好。 - Jishnu V S

Answer 3

在 Bootstrap 4.4 中，只需将此单行代码添加到我的JS代码中（位于文档准备子句中），似乎就可以解决问题：

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

- Ben in CA

Answer 4

我在Yii2中使用折叠小部件。 为面板分配一个ID。
如果您有纯HTML，只需将ID添加到a标签并更新选择器即可。

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

- Ruben

Answer 5

对我来说有效的方法是：

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

- Jafix

Answer 6

仅是回应一下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');
            }
        });

- Ryan Dorn