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>

我试图捕捉事件并滚动到但它没有用。有什么想法吗？

Answer 1

因此，在使用能力方面，由于手风琴效果的作用方式存在一些延迟，但这是一种使这项工作有效的方法。

$('.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秒延迟以允许手风琴折叠，否则它会在事件发生时滚动到标题位置（点击）这大约是文本的一半（在已经打开的手风琴部分下方打开标题时）。

Answer 2

除了@JokerDan的答案之外，当不时，这只会滚动到相应的.collapsible-header：

第一个li元素，
.collapsible-body的身高低于所需的身高

_

$('.collapsible').collapsible({
  accordion : false 
}).on('click.collapse', 'li > .collapsible-header', function(e) {
    var $this = $(e.currentTarget), //or $(this)
        $body = $this.siblings('.collapsible-body'),
        $parent = $this.parent(),
        //Change this to your desired max height
        //of one .collabsible-body
        maxHeight = 700 

    //Wait for slide animation to complete
    //which is 350ms
    setTimeout(function(){
      if ($parent.is(':first-child')) return

      if ($body.height() > maxHeight)
          $('html, body').animate({
              scrollTop: $this.offset().top
          }, 500)
    }, 350)
});

这是fiddle。（full view）

$('.collapsible').collapsible({
  accordion : false 
}).on('click.collapse', 'li > .collapsible-header', function(e) {
    var $this = $(e.currentTarget), //or $(this)
        $body = $this.siblings('.collapsible-body'),
        $parent = $this.parent(),
        //Change this to your desired max height
        //of one .collabsible-body
        maxHeight = 700 

    //Wait for slide animation to complete
    //which is 350ms
    setTimeout(function(){
      if ($parent.is(':first-child')) return
      
      if ($body.height() > maxHeight)
          $('html, body').animate({
              scrollTop: $this.offset().top
          }, 500)
    }, 350)
});

body {

}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v11/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

<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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><p>
Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.t.</p></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><p>Lorem ipsum dolor sitLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, conLorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate ante turpis, eget accumsan tellus iaculis sed. Suspendisse in vehicula arcu. Nullam eget dui vehicula, molestie mi sed, scelerisque dui. Vestibulum non augue porttitor, condimentum arcu quis, interdum nulla. Proin sollicitudin arcu non gravida cursus. Nullam tincidunt ipsum vel elit faucibus faucibus. In varius erat sit amet felis porta lobortis et sit amet nisi. Duis vestibulum, arcu vel aliquet suscipit, lorem tellus rutrum ligula, a sollicitudin lorem erat a augue. Maecenas ornare, dui id tincidunt imperdiet, erat ligula pulvinar metus, eu rutrum leo felis nec justo. Proin sed pellentesque orci, nec congue est. Curabitur sed egestas nulla.

Donec eget tempor nibh. Ut ligula sem, vehicula vitae fermentum et, viverra ac libero. Curabitur rutrum elit neque. Integer semper eleifend auctor. Sed interdum tincidunt nisl, et fringilla nunc convallis quis. Duis in laoreet arcu. Duis interdum consequat interdum. Nunc tempus est ac vehicula cursus. Sed convallis nisl a diam iaculis, non feugiat lorem vestibulum. In eu nibh feugiat, mattis quam dignissim, finibus tortor.

Nam quis quam sed ante consectetur sagittis non nec felis. Aenean eget neque sed orci fermentum consequat. Donec vestibulum mi a luctus vulputate. Donec sollicitudin, enim eu dignissim pulvinar, purus massa lacinia felis, et vulputate arcu enim pharetra libero. Integer tempor metus vitae dapibus dapibus. Phasellus id pharetra orci, sed gravida ligula. Curabitur at velit vel nibh fringilla posuere. Aenean sit amet quam sed ex tempus rhoncus quis a justo. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Etiam dui risus, pharetra quis mi finibus, posuere mattis nisi. Quisque varius ex ante, vitae euismod nunc ultricies nec. Mauris et lobortis metus, ut fermentum tellus. Integer finibus commodo dui ac condimentum. Integer dapibus sollicitudin tristique. Cras quis tincidunt odio. Morbi commodo mauris lorem, ut ullamcorper neque eleifend ut. Aenean non mauris eu nibh efficitur posuere. Sed non faucibus dui. Suspendisse blandit porttitor ligula at placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit.sectetur adipiscing elit. Integer iaculis at sem non ullamcorper. Sed vel felis placerat enim fermentum suscipit. Aenean ut lacus rutrum, tincidunt sapien commodo, congue ligula. Ut consequat nibh quis nibh posuere, ut rutrum odio posuere. Nunc ultricies ipsum vel nulla interdum, ut faucibus felis feugiat.

Sed at enim at dolor aliquam commodo. Ut dapibus sollicitudin varius. Aliquam eu lorem arcu. Etiam ac felis non magna sagittis gravida non et eros. Sed vitae finibus lectus. In tristique id nisl nec efficitur. Donec tincidunt, mauris sed hendrerit varius, leo nisl ultrices velit, quis dapibus leo libero commodo elit. amet.</p></div>
    </li>
  </ul>


<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

参考

materialize.js#L377（slideDown duration）
materialize.js#L411（点击事件选择器）

实现 - 具有巨大内容的可折叠不会滚动到选项卡的顶部

2 个答案:

参考