如何让Bootstrap 3折叠式手风琴面板加载到其内容的顶部而不是中途下载？

Question

我有一系列bootstrap 3手风琴面板,里面有很多内容,几乎可以正常工作......它们按照需要加载折叠,然后在按下时打开,在过程中折叠任何其他打开的面板; 都好...

但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2时,Panel 2内容将"向上"加载到可见浏览器窗口的顶部; 意味着用户必须向上滚动才能看到Panel 2的顶部.令人沮丧!

我希望加载Panel 2,以便在浏览器窗口中显示它的顶部.

这是一个JSFiddle

<div class="panel-group" id="accordion">
    <!-- first panel -->
    <div class="panel panel-default">
        <div class="panel-heading"> 
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne" id="predict">
                   Gettysburg <span class="caret"></span>
                </a>
            </span>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <!--LOTS OF CONTENT - replaced with image-->
                <img src="http://i.imgur.com/AMhADP1.png" />
            </div>
        </div>
    </div>

    <!-- second panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="aries">
                    Background <span class="caret"></span>
                </a>
            </span>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <!--LOTS OF CONTENT - replaced with image-->
                <img src="http://imgur.com/j98Q0H8.png" />
            </div>
        </div>
    </div>
</div>

关于我如何解决这个问题的任何想法,好吗？

Answer 1

浏览器将始终尝试保持其在页面中的当前位置,即使您折叠/显示可能破坏该位置的大型元素也是如此.

您可以使用Gokhan建议的两部分方法来解决这个问题:

1. 点击手风琴所显示事件的事件处理程序
2. 显示后滚动到当前面板的顶部.

第一部分非常简单.从Collapse Events Docs中我们会发现:

shown.bs.collapse - 当一个折叠元素对用户可见时将触发此事件(将等待CSS转换完成)​​.

我们会像这样听这个事件:

$('#accordion').on('shown.bs.collapse', function (e) {
   var id = $(e.target).prev().find("[id]")[0].id;
   navigateToElement(id);
})

在shown事件中,我已经调用的函数navigateToElement,并在通过id从可视面板的标题.导航功能将使用jquery的animate滚动到id的位置:

function navigateToElement(id) {
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}

在jsFiddle工作演示

Answer 2

http://bootply.com/101026

这是另一种方法(类似于@KyleMit)..找到打开的面板并使用jQuery滚动到它的顶部:

$('#accordion').on('shown.bs.collapse', function () {

  var panel = $(this).find('.in');

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

});