Bootstrap之折叠（Collapse）插件

大家可能常见的都是类似：

这种的效果，小颖今天要给大家分享一个不一样的效果嘻嘻。铛铛铛铛............................

Bootstrap之折叠（Collapse）插件

这个想实现的是，默认显示一部分内容，当点击下拉图标后，下面的内容也显示出来，其实小颖只是把官网中的 class名为：collapse的部分和 data-toggle="collapse" 部分的位置做了交换。下面我们一起来看看代码吧：

html：

<body>
    <div class="list-accordion">
        <div class="panel-group" >
            <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 >
                    <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 >
                        <span ></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>