jquery - 如何在嵌套面板组的引导折叠中滑动到面板标题顶部

Question

演示:http://jsbin.com/howovu/1/

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

测试时:使视口(viewport)比内容短。

这会根据以下 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 技术有些蹩脚。

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

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

目标:单击当前面板标题的顶部并滑动到该面板标题的顶部，即使它是嵌套的。

尝试过:.children().find('.in') - 做了同样的事情 - 也尝试其他东西

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; 来简单地声明变量。演示网址已更新。