Bootstrap实现手风琴效果

来源：互联网发布：河北北方学院网络教学编辑：程序博客网时间：2024/05/23 15:31

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>

阅读全文

0 0