首页 > 代码库 > Bootstrap之折叠（Collapse）插件
Bootstrap之折叠（Collapse）插件
学习资料：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="http://www.mamicode.com/#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>
Bootstrap之折叠（Collapse）插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。