Question

我有一个带有手风琴自举3的div容器。

<div id="cont-accordion" style="height: 300px;overflow-y:scroll;">
    <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>
      <!-- second panel -->
</div>
</div>


jQuery("#accordion").on("shown.bs.collapse", function () {
    var myEl = jQuery(this).find('.collapse.in');
    jQuery('#cont-accordion').animate({
        scrollTop: jQuery(myEl).offset().top
    }, 500);
});

当我打开面板时，面板放在顶部，但如果我打开另一个面板，则它不会位于顶部。

只有在我关闭面板之前它才有效。我该如何解决？

示例http://jsfiddle.net/s88x9dtk/

Answer 1

为了做类似的事情，使用返回的事件来检索触发元素：

$('#accordion').on('shown.bs.collapse', function (event) {
    var $el = $('[href="#' + $(event.target).attr('id') + '"]');

    $('#cont-accordion').animate({
        scrollTop: $el.offset().top
    }, 500);
});

Answer 2

试试这个：

$(document).on("shown.bs.collapse", ".panel-collapse, a[data-toggle='tab']", function () {
      var selected = $(this);
      $("html, body").animate({
        scrollTop: selected.offset().top
      }, 1000);
});

在div溢出-y内打开时，Bootstrap 3手风琴滚动到顶部

2 个答案: