jquery - 打开 Bootstrap Accordion 后滚动到内容

Question

我有一个 Bootstrap Accordion ，里面有很多面板。我面临的问题是，如果面板在页面外打开，用户不知道面板已打开并且他们可以向下滚动到它。

为了解决这个问题，我希望能够滚动到现在打开的内容，以便他们知道该内容已打开，并且可以避免他们滚动到该内容。

当我尝试这样做时，我似乎遇到了问题。

这就是我的函数的样子

$('.accLink').on('click', function(){
  if($(this).parent().next('.panel-collapse').hasClass('in')){

  }else{
   //This is where the scroll would happen
  }
});

到目前为止我已经尝试过...

$('html, body').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);

和

$('div').animate({
  scrollTop: ($(this).parent().next('.panel-collapse'))
  },500);

我也尝试过类似的事情......

function scrollToElement(ele) {
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

var element = $(this).parent().next('.panel-collapse').attr('id');
scrollToElement($('#'+element));

但都不对页面执行任何操作。它只是坐在那里。任何帮助将不胜感激!

Answer 1

使用 Bootstrap 的内置事件回调，而不是单独的点击事件监听器:

$("#accordion").on("shown.bs.collapse", function () {
    var myEl = $(this).find('.collapse.in');

    $('html, body').animate({
        scrollTop: $(myEl).offset().top
    }, 500);
});

或者，如果您希望显示标题:

$("#accordion").on("shown.bs.collapse", function () {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');

    $('html, body').animate({
        scrollTop: $(myEl).offset().top
    }, 500);
});