引导程序折叠滚动顶部滚动到错误的元素

Question

我正在使用此脚本滚动到显示的折叠元素：

$('.collapse').on('shown.bs.collapse', function () {
  $('html, body').stop().animate({
    scrollTop: $(this).offset().top
  }, 500, 'swing');
});

除了我在非常小的屏幕尺寸上的导航之外，它完全适用于所有东西。打开菜单时，我希望它滚动到导航的顶部。这适用于我的顶级导航，但对于我的二级导航，它会滚动到部分的顶部，而不是导航。

Bootply

（使用移动预览->点击按钮打开可折叠导航->点击"链接1"->滚动到底并点击按钮打开第二个可折叠导航）

正如你将看到的，它滚动到"链接1"标题，而不是刚刚打开的导航。

Answer 1

这个没有答案的问题让我有点困扰，所以近3年后我又看了一眼。我发现父导航和第二个导航都在第二个"显示"事件上启动。

然后我发现了这个类似的问题，被接受的答案掌握了关键。

它就像使用event对象的stopPropagation方法一样简单，可以防止父折叠元素也被通知事件。

$('.collapse').on('shown.bs.collapse', function (event) {
    event.stopPropagation();
    $('html, body').stop().animate({
        'scrollTop': $(this).offset().top
    }, 500, 'swing');
});

已更新bootply。