如何才能同时锚定并打开Bootstrap手风琴？

Question

我正在使用Bootstrap手风琴，它的工作原理就像一种魅力，完全没有问题。但是，我想链接到手风琴中的一个标签。这个想法是，一旦我单击链接，我就被带到页面的那部分（页面中的手风琴确实在下面）并打开选项卡。

因此，我使用了以下内容：

<a href="#prizes" data-toggle="collapse" data-parent="#accordion"><i class="mdi-action-info"></i></a>

这应该工作。它的作用部分在于：它会在右侧打开“手风琴”选项卡，但是，该页面不会按原样滚动到锚点。它只是停留在相同的位置，但是打开了手风琴。

知道如何解决吗？我找到了与jQuery UI手风琴相关的答案，但与BS手风琴无关（并且jQuery UI手风琴也无效），真的不知道为什么这不起作用

Answer 1

为了滚动到锚点，您应该等到可折叠 div 完全显示。

JQuery 通过折叠事件帮助我们轻松解决这个问题。

$(document).ready(function() {
    $("#section-two").on('shown.bs.collapse', function() {
        window.location = "#section-two";
    });
});

查看w3schools.com 上的Bootstrap JS 折叠参考以获取快速文档。

Answer 2

您可以像这样手动进行操作：

<a href="#accordion" id="my-link" class="btn btn-primary">Open group 2</a>

JS

$('#my-link').click(function(e) {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');        
});

小提琴