jquery - Materialise - 可折叠的大量内容不会滚动到选项卡顶部

Question

我使用collapsible component provide by materialize framework 。我遇到一个错误，但不知道如何解决它或找到解决方法。如果一个选项卡的内容太大，当我打开该选项卡时，它不会滚动到选项卡本身的顶部(它会滚动到中间)。

您可以在这里尝试:https://jsfiddle.net/r8314ouq/ 。 打开第一个选项卡，然后打开第三个选项卡，您会发现它没有滚动到选项卡的开头。

我明白了 但我想看看 这非常烦人，因为用户必须滚动才能看到所有内容。

我按照文档创建了我的可折叠:

<ul class="collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
  </ul>

我 try catch 该事件并滚动，但没有成功。 有什么想法吗？

Answer 1

因此，就可用性而言，由于 Accordion 效果的工作方式，存在一些延迟，但这里有一种实现此功能的方法。

$('.collapsible').collapsible({
  accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});

$('.collapsible .collapsible-header').on('click', function(event) {
    var target = $(this);
    setTimeout(function() {
      if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
      }
    }, 300);
});

Here is your JSFiddle modified to work

500 是半秒的滚动效果动画，同时 300 是大约 0.3 秒的延迟，以允许 Accordion 折叠，否则它会滚动到事件触发点的标题位置(单击)大约是文本的一半(当在已打开的 Accordion 部分下方打开标题时)。