你应该试试 鞋带 我有折叠& Uncollapse的样本......
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum [1st menu]....
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum [2nd menu]....
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
Lorem ipsum [3rd menu]....
</div>
</div>
</div>
</div>
试试这个。
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="description" content="">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start Header Section -->
<main>
<div class="container">
<ul class="collapsible" data-collapsible="accordion">
<li class="main">
<div class="collapsible-header"><i class="mdi-image-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="mdi-maps-place"></i>Second</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div>
<div class="collapsible-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
</ul>
</div>
</main>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('.collapsible').collapsible({
accordion: true // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
$('.main').addClass('active');
$('.main .collapsible-header').addClass('active');
$('.main .collapsible-body').css('display', 'block');
});
</script>
</body>
</html>你需要设置 li班级 active 您想折叠的
在collapsible-header中设置类-active。
<li>
<div className="collapsible-header active">
<i className="material-icons">filter_drama</i>First
</div>
<div className="collapsible-body"><span>Lorem ipsum dolor sit amet.</span>
</div>
</li>