學習資料：Bootstrap 折疊（Collapse）插件
大家可能常見的都是類似：
這種的效果，小穎今天要給大家分享一個不一樣的效果嘻嘻。鐺鐺鐺鐺............................
這個想實現的是，默認顯示一部分內容，當點擊下拉圖標后，下面的內容也顯示出來，其實小穎只是把官網中的 class名為：collapse的部分和 data-toggle="collapse" 部分的位置做了交換。下面我們一起來看看代碼吧：
html：
<body>
<div class="list-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-content">
<div class="require-list">蘋果</div>
<div class="require-list">香蕉</div>
<div class="require-list">榴蓮</div>
<div class="require-list">提子</div>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body content-down">
<div class="require-list">青芒/貴妃芒</div>
<div class="require-list">西瓜</div>
<div class="require-list">草莓</div>
<div class="require-list">火龍果</div>
</div>
</div>
<div class="panel-heading">
<a id="move" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span id="glyphiconMove" class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</div>
</div>
</body>
js：
<script type="text/javascript">
$(function() {
$("#move").click(function() {
if ($("#glyphiconMove").hasClass("glyphicon-chevron-down")) {
$("#glyphiconMove").removeClass("glyphicon-chevron-down");
$("#glyphiconMove").addClass("glyphicon-chevron-up");
} else {
$("#glyphiconMove").removeClass("glyphicon-chevron-up");
$("#glyphiconMove").addClass("glyphicon-chevron-down");
}
});
});
</script>