如何在嵌套面板组的bootstrap折叠中滑动到面板标题的顶部

Question

DEMO：http://jsbin.com/howovu/1/

http://jsbin.com/howovu/1/edit

测试时：使视口比内容短。

根据以下jQuery滑动到单击的面板标题的顶部：

// slide to top of the clicked panel -- does not work with nested accordions
    $('.panel-group').on('shown.bs.collapse', function() {
        var panel = $(this).find('.in');
       $('html, body').animate({
            scrollTop: panel.offset().top + (-60)
       }, 500);
    });

我相信这会修复它，仍在测试：

$('.panel-group').on('shown.bs.collapse', function(e) {
        var panel = $(this).find('.in');
       $('html, body').animate({
            scrollTop: panel.offset().top + (-60)
       }, 500);
      e.stopPropagation(); //added
    });

但是当你点击一个嵌套的.panel-group（参见示例== HAS嵌套）时，它会反弹然后弹回到父级。我试过.next（而不是.find），但那不起作用。我的jQuery chops有点疯狂。

我无法在jQuery上使用ID，它必须适用于所有.panel-group。

如果有人可以提供帮助，请提前致谢。

目标：点击当前面板标题的顶部，并滑动到该面板标题的顶部，即使它已嵌套。

尝试：.children（）。find（＆＃39; .in＆＃39;） - 做同样的事情 - 尝试其他的东西

Answer 1

您可能希望为此使用标志，并在动画完成后将其设置为false，但在单击面板后再将其设置为true。稍微麻烦，但诀窍是：

var flag;
$('.panel-group').click(function(){
  flag = true;
});
$('.panel-group').on('shown.bs.collapse', function() {
    var panel = $(this).find('.in');
    if (flag) {
      $('html, body').animate({
        scrollTop: panel.offset().top -60
      }, 500);
      flag = false;
    }
});

更新了您的演示：http://jsbin.com/zozavefibuqa/1

信用/来源：https://stackoverflow.com/a/11691120/2037924

编辑：我删除了第一个var flag = true;语句，因为它是不必要的，将其转换为var flag;以简单地声明变量。演示URL已更新。