在我使用Bootstrap 3构建的网站上,有一个使用折叠类隐藏的部分.我添加了一个按钮来切换部分,使其可见.一切正常.我需要的是能够切换内容并在显示时滚动到该部分.
这是我的按钮代码：
<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将事物绑定在一起(尽管我的jQuery技能非常有限)：
$(document).ready(function() {
$("#benefits").bind('shown',function() {
document.getElementById('benefits').scrollIntoView();
});
});
解决方法
您应该绑定到Bootstrap折叠插件中的相应事件：
http://getbootstrap.com/javascript/#collapse-events
$('#benefits').on('shown.bs.collapse',function () {
this.scrollIntoView();
});
