Bootstrap 3 折叠滚动顶部答案

【问题标题】：Bootstrap 3 collapse scrollTopBootstrap 3 折叠滚动顶部
【发布时间】：2013-10-08 01:35:07
【问题描述】：

我在使用 Bootstrap 3 的手风琴时遇到了一点问题。

我想要做的是向手风琴切换添加一个类，然后滚动/跳转到那个新添加的类。添加/删除类工作正常，我想我会在同一个块中添加一个 scrollTop ......但没有这样的运气。我错过了什么？

这是它的设置方式：

面板链接：

<ul>
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel1</a>
    </li>
    <li><a data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel2</a>
    </li>
    <li>
        <a data-toggle="collapse" data-parent="#accordion" href="#panel3" ">Panel3</a></li>
</ul>

面板：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aWeight active" data-toggle="collapse" data-parent="#accordion" href="#panel1">
    Panel 1
    </a>
    </h4>

        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel2">
    Panel 2
    </a>
    </h4>

        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
             <h4 class="panel-title">
    <a class="accordion-toggle aFitness" data-toggle="collapse" data-parent="#accordion" href="#panel3">
    Panel 3
    </a>
    </h4>

        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">Anim pariatur...</div>
        </div>
    </div>
</div>

最后我使用这个脚本来切换活动类：

$(function () {
    $('.accordion').on('show', function (e) {
        $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
    });
    $('.accordion').on('hide', function (e) {
        $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
    });
});

【问题讨论】：

标签： jquery twitter-bootstrap accordion twitter-bootstrap-3 scrolltop

【解决方案1】：

您在使用 Bootstrap 2 事件时参考了 Bootstrap 3，请参阅：http://getbootstrap.com/javascript/#collapse。折叠插件已经添加了一个类 (.in)。

当shown.bs.collapse 被触发时，您的“新”面板具有“.in”类，而当hide.bs.collapse 被触发时，“旧”面板仍然具有“.in”类。

尝试：

$(function () {
    $('#accordion').on('shown.bs.collapse', function (e) {
        var offset = $('.panel.panel-default > .panel-collapse.in').offset();
            if(offset)$('html,body').scrollTop(offset.top);
    });
});

【讨论】：

是的，我粘贴了错误的代码。它正在使用 bootstrap 3 事件。但现在会尝试一下。
效果很好。只是在一些动画中折腾以使其更清洁。谢谢！

【解决方案2】：

$(".accordion-body").on("shown", function () {
var id = $(this).attr('id');
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000);
});
});

【讨论】：