jquery - 使用Bootstrap data-toggle ="collapse"和scrollIntoView()来显示和滚动到内容

Question

在我使用 Bootstrap 3 构建的网站上，有一个使用 collapse 类隐藏的部分。我添加了一个按钮来切换该部分，以便它变得可见。一切都很好。我需要的是能够切换内容并在显示时滚动到该部分。

这是我的按钮代码:

<button class="btn btn-lg btn-primary" href="#benefits" data-toggle="collapse">Learn More</button>

这是我的内容:

<section id="benefits" class="text-white collapse" data-toggle="collapse">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                Text goes here
            </div>
        </div>
    </div>
</section>

最后，我在这里尝试使用 jQuery 将事物绑定(bind)在一起(尽管我的 jQuery 技能非常有限):

$(document).ready(function() {
    $("#benefits").bind('shown', function() {
        document.getElementById('benefits').scrollIntoView();
    });
});

任何人都可以发现我上面的代码的问题，或者提出更好的解决方案吗？

Answer 1

您应该绑定(bind)到 Bootstrap 折叠插件中的适当事件:http://getbootstrap.com/javascript/#collapse-events

$('#benefits').on('shown.bs.collapse', function () {
  this.scrollIntoView();
});