Materialise - 可折叠的大量内容不会滚动到选项卡顶部
Materialize - Collapsible with a huge content does not scroll to top of the tab
我用的是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>
我试图捕捉事件并滚动到但没有成功。
有什么想法吗？
因此，就 use-ability 而言，由于手风琴效果的工作方式，存在一些延迟，但这里有一种实现此功能的方法。
$('.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是滚动效果的half-a-second动画，同时300是0.3秒左右的延迟让手风琴折叠，否则滚动到headers位置事件触发（点击）的时间大约是 half-way 通过文本（当在已经打开的手风琴部分下方打开 header 时）。
除了@JokerDan 的回答，这只会滚动到相应的 .collapsible-header 当它是 not:
- 第一个
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)
});
$('.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 持续时间）
- materialize.js#L411（点击事件选择器）
我用的是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>
我试图捕捉事件并滚动到但没有成功。 有什么想法吗？
因此，就 use-ability 而言，由于手风琴效果的工作方式，存在一些延迟，但这里有一种实现此功能的方法。
$('.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是滚动效果的half-a-second动画，同时300是0.3秒左右的延迟让手风琴折叠，否则滚动到headers位置事件触发（点击）的时间大约是 half-way 通过文本（当在已经打开的手风琴部分下方打开 header 时）。
除了@JokerDan 的回答，这只会滚动到相应的 .collapsible-header 当它是 not:
- 第一个
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)
});
$('.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 持续时间）
- materialize.js#L411（点击事件选择器）