我有一系列引导3手风琴小组,其中包含了大量内容,几乎可以正常工作…他们按需要加载折叠,打开时应该点击,折叠任何其他打开的面板;都好…
但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2,Panel 2的内容通过可视浏览器窗口的顶部加载“向上”;意思是用户必须向上滚动才能看到面板2的顶部.令人沮丧！
我希望Panel 2加载,所以它的顶部在浏览器窗口中可见.
<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>
有什么想法可以解决这个问题吗？
解决方法
浏览器将始终尝试保持其在页面中的当前位置,即使您崩溃/显示可能会中断该位置的大元素.
>点击手风琴显示事件的事件处理程序
>滚动显示当前面板的顶部.
第一部分很简单.从Collapse Events Docs我们会发现：
shown.bs.collapse – This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
我们会听这样的事件：
$('#accordion').on('shown.bs.collapse',function (e) {
var id = $(e.target).prev().find("[id]")[0].id;
navigateToElement(id);
})
在所示事件中,我调用了一个函数navigateToElement,并将其从可见面板的头部传递到id中.导航功能将使用jquery的animate滚动到id的位置：
function navigateToElement(id) {
$('html,body').animate({
scrollTop: $("#" + id).offset().top
},1000);
}