Bootstrap实现手风琴效果

Bootstrap实现手风琴效果

用Bootstrap实现手风琴效果中，其实主要用到的就是一些折叠插件。

效果展示：

每次只展开一个部分的内容。

实现的代码：

<!-- 手风琴折叠：方法一 -->
    <div class="panel-group" id="accordion">
        <div class="panel panel-default"><!-- 第一个容器 -->
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse1" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse" > <!-- 折叠菜单的部分collapse:开始时先隐藏 -->
                <div class="panel-body">第一部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse2" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>
                </h4>
            </div>
            <div id="collapse2" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse3" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>
                </h4>
            </div>
            <div id="collapse3" class="panel-collapse collapse" >
                <div class="panel-body">第三部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse4" data-toggle="collapse" data-parent="#accordion">第四部分链接</a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse" >
                <div class="panel-body">第四部分内容</div>
            </div>
        </div>
    </div>

<!-- 手风琴折叠效果：方法二 -->

    <!-- html代码 -->
    <div class="panel-group" id="accordion1">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse5" data-toggle="collapse">第一部分链接</a>
                </h4>
            </div>
            <div id="collapse5" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse6" data-toggle="collapse">第二部分链接</a>
                </h4>
            </div>
            <div id="collapse6" class="panel-collapse collapse" > 
                <div class="panel-body">第一部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse7" data-toggle="collapse">第三部分链接</a>
                </h4>
            </div>
            <div id="collapse7" class="panel-collapse collapse" >
                <div class="panel-body">第三部分内容</div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapse8" data-toggle="collapse">第四部分链接</a>
                </h4>
            </div>
            <div id="collapse8" class="panel-collapse collapse" >
                <div class="panel-body">第四部分内容</div>
            </div>
        </div>
    </div>


    //js代码
    <script type="text/javascript">
        //手风琴折叠效果
        $('#collapse5, #collapse6, #collapse7, #collapse8').collapse({
            parent:'#accordion1',
            toggle:false
        })  
    </script>