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

但是對頁面也沒有任何幫助。它只是坐在那裏。任何幫助，將不勝感激！

Answer 1

，而不是一個單獨的單擊事件監聽器，使用引導程序的內置事件回調：

$("#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); 
});