Bootstrap Accordion - 开始全部关闭

新手上路,请多包涵

所以我的页面上有一个引导式手风琴 - 但在开始时,第一个面板是打开的。我怎样才能做到当你加载页面时,它们都关闭了?

任何帮助将非常感激!非常感谢!

 <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="fa fa-minus text-primary"></i> Overview</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse in">
            <div class="panel-body">Contents panel 1</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> Utilities</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 2</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> Organization</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> Integrations</a>
            </h4>
        </div>
        <div id="panel4" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> Essentials</a>
            </h4>
        </div>
        <div id="panel5" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> Sales</a>
            </h4>
        </div>
        <div id="panel6" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> Support</a>
            </h4>
        </div>
        <div id="panel7" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> Projects</a>
            </h4>
        </div>
        <div id="panel8" class="panel-collapse collapse">
            <div class="panel-body">Contents panel 3</div>
        </div>
    </div>
</div>

原文由 becca 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 423
2 个回答

助推器 3

只需从面板 1 中删除 .in

 <div id="panel1" class="panel-collapse collapse">
   <div class="panel-body">Contents panel 1</div>
</div>

引导程序 4

请参阅 @Syed Sajid 的回答

原文由 Steven B. 发布,翻译遵循 CC BY-SA 4.0 许可协议

Bootstrap 4 和 4+ 从 — 中删除类 show collapse show

 <div class="collapse">
    <div class="card-body"></div>
</div>

原文由 Syed Sajid 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题