Question

我有一个简单的手风琴脚本，希望这些项目在“打开”时滚动到视图中。我在移动设备上遇到的问题是，如果其中一个内容很长，则当打开下一个内容时，当另一个内容关闭时，它就会移出视线。

这是示例代码： HTML

<div id="mobile-bios">
  <div class="leader-image">Section 1</div>
  <div class="leader-content">
    Leader 1
  </div>
  <div class="leader-image">Section 2</div>
  <div class="leader-content">
    Leader 2
  </div>
  <div class="leader-image">Section 3</div>
  <div class="leader-content">
    Leader 3
  </div>

</div>

CSS

.leader-content {
  display: none;
  height: 500px;
}

JQUERY

// Leader Accordion
$('#mobile-bios').find('.leader-image').click(function() {

  //Expand or collapse this panel
  $(this).addClass('active').next().slideToggle('fast');

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

  //Hide the other panels
  $("#mobile-bios .leader-content").not($(this).next()).slideUp('fast');
  $('#mobile-bios .leader-image').not($(this)).removeClass('active');

});

我尝试使用scrollTop函数，尽管它可以工作，但并不能满足我的要求。

I also have a fiddle here。

Answer 1

好吧，我想出了一种解决方法，可以在click函数中添加bind来在适当的时候完成滚动功能。这是最终的JQuery脚本：

// Leader Accordion
$('#mobile-bios').find('.leader-image').click(function() {
  //Expand or collapse this panel
  $(this).addClass('active').next().slideToggle('fast');

  //Hide the other panels
  $("#mobile-bios .leader-content").not($(this).next()).slideUp('fast');
  $('#mobile-bios .leader-image').not($(this)).removeClass('active');
});

$('#mobile-bios .leader-image').bind('click', function() {
  var self = this;
  setTimeout(function() {
    theOffset = $(self).offset();
    $('body,html').animate({
      scrollTop: theOffset.top - 100
    });
  }, 310);
});

jQuery手风琴滚动打开元素进入视图

1 个答案: