展开 Bootstrap 手风琴后滚动到内容

Question

我有一个包含多个折叠面板的Bootstrap手风琴。我遇到的问题是如果面板打开后超出页面区域，用户就无法知道该面板已经打开，也无法向下滚动查看。

为了解决这个问题，我想要能够滚动到现在打开的内容，以便用户知道该内容已经打开，并且节省他们滚动的时间。

然而，当我尝试实现时，似乎遇到了一些问题。

这是我的函数代码：

$('.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));

但它们都没有对页面做出任何反应。页面就呆在那里。任何帮助将不胜感激！

- zazvorniki

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);
});

- isherwood

Answer 2

滚动页面以显示页面顶部的展开/激活手风琴

$('#accordion').on('shown.bs.collapse', function(e) {
  var offset = $('.panel.panel-default > .panel-collapse.in').offset().top;
  if (offset > 0) {
    $('html,body').animate({
      scrollTop: $('.panel .active').offset().top - 100
    }, 500);
    // you can chagne 100 value to take distance in pixels from top in page
  }
});

- Billu