前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Bootstrap中保持多个折叠打开

如何在Bootstrap中保持多个折叠打开

原创
作者头像
用户6596941
发布2022-07-21 16:36:09
7380
发布2022-07-21 16:36:09
举报
文章被收录于专栏:boostrap前端boostrap前端
代码语言:javascript
复制
 <div class="accordion">
        <div class="item">
            <div class="accordion-header" style="background-color: #F9F9F9" id="accordionExample1">
                <button class="btn" type="button" data-toggle="collapse" data-target="#accordion1" aria-expanded="true" style="font-size: 16px;font-weight: bold;color: #1F1F1F;">
                  一级  <span style="color: #FF0000;">*</span>
                </button>
            </div>
            <div id="accordion1" class="accordion-body collapse show" data-parent="#accordionExample1">
                <div class="accordion-content" style="padding: 20px 10px 20px 10px;">
                    <div id="setupT1" class="wide-block pt-2 pb-2" style="padding: 0 0 0 0 !important;"></div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="accordion-header" style="background-color: #F9F9F9" id="accordionExample2">
                <button class="btn" type="button" data-toggle="collapse" data-target="#accordion2" aria-expanded="true"  style="font-size: 16px;font-weight: bold;color: #1F1F1F">
                    二级
                </button>
            </div>
            <div id="accordion2" class="accordion-body collapse show" data-parent="#accordionExample2" style="">
                <div class="accordion-content" style="padding: 20px 10px 20px 10px;">
                    <div id="setupT2" class="wide-block pt-2 pb-2" style="padding: 0 0 0 0 !important;"></div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="accordion-header" style="background-color: #F9F9F9" id="accordionExample3">
                <button class="btn" type="button" data-toggle="collapse" data-target="#accordion3" aria-expanded="true"  style="font-size: 16px;font-weight: bold;color: #1F1F1F">
                    三级
                </button>
            </div>
            <div id="accordion3" class="accordion-body collapse show" data-parent="#accordionExample3" style="">
                <div class="accordion-content" style="padding: 20px 10px 20px 10px;">
                    <div id="setupT3" class="wide-block pt-2 pb-2" style="padding: 0 0 0 0 !important;"></div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="accordion-header" style="background-color: #F9F9F9" id="accordionExample4">
                <button class="btn" type="button" data-toggle="collapse" data-target="#accordion4" aria-expanded="true"  style="font-size: 16px;font-weight: bold;color: #1F1F1F">
                    四级
                </button>
            </div>
            <div id="accordion4" class="accordion-body collapse show" data-parent="#accordionExample4" style="">
                <div class="accordion-content" style="padding: 20px 10px 20px 10px;">
                    <div id="setupT4" class="wide-block pt-2 pb-2" style="padding: 0 0 0 0 !important;"></div>
                </div>
            </div>
        </div>

        <div class="item">
            <div class="accordion-header" style="background-color: #F9F9F9" id="accordionExample5">
                <button class="btn" type="button" data-toggle="collapse" data-target="#accordion5" aria-expanded="true"  style="font-size: 16px;font-weight: bold;color: #1F1F1F">
                    五级
                </button>
            </div>
            <div id="accordion5" class="accordion-body collapse show" data-parent="#accordionExample5" style="">
                <div class="accordion-content" style="padding: 20px 10px 20px 10px;">
                    <div id="setupT5" class="wide-block pt-2 pb-2" style="padding: 0 0 0 0 !important;"></div>
                </div>
            </div>
        </div>
    </div>
</div>


展示效果如下:
代码运行展示效果
代码运行展示效果

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档