twitter-bootstrap – 如何使Bootstrap 3折叠的手风琴面板放在其

发布时间：2020-12-18 00:25:48 所属栏目：安全来源：网络整理

导读：我有一系列引导3手风琴小组,其中包含了大量内容,几乎可以正常工作…他们按需要加载折叠,打开时应该点击,折叠任何其他打开的面板;都好… 但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2,Panel 2的内容通过可视浏览器窗口的顶部加载“向上”;意思是用户

我有一系列引导3手风琴小组,其中包含了大量内容,几乎可以正常工作…他们按需要加载折叠,打开时应该点击,折叠任何其他打开的面板;都好…

但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2,Panel 2的内容通过可视浏览器窗口的顶部加载“向上”;意思是用户必须向上滚动才能看到面板2的顶部.令人沮丧！

我希望Panel 2加载,所以它的顶部在浏览器窗口中可见.

Here’s a 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>

有什么想法可以解决这个问题吗？

解决方法

浏览器将始终尝试保持其在页面中的当前位置,即使您崩溃/显示可能会中断该位置的大元素.

你可以用Gokhan建议的两部分方法解决这个问题：

>点击手风琴显示事件的事件处理程序
>滚动显示当前面板的顶部.

第一部分很简单.从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);
}

Working Demo in jsFiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!