Bootstrap - 不能让我的手风琴在默认情况下保持关闭状态？

Question

我有一个手风琴项目，我用它来读取页面上更多/更少的链接。

这样做的目的是点击它阅读更多内容，然后会有几个段落。

我有这个工作，但我需要它在页面加载时保持关闭，此时页面加载项目打开。

我可以添加什么来解决这个问题？

<div class="accordionMod panel-group">
    <div class="accordion-item">
        <h4 class="accordion-toggle">Read More / Less</h4>
        <section class="accordion-inner panel-body">
            <p>more info.</p>
            <h4 class="title">More titles</h4>
            <p>more content</p>
        </section>
    </div>
</div>

Answer 1

我认为这会起作用

<div class="accordion" id="myAccordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
                Title
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                Content
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
                Title
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Content
            </div>
        </div>
    </div>
</div>

如果您将课程in添加到accordion-body collapse，则默认情况下会将其打开。

Answer 2

听起来你不需要手风琴，它有多个面板，其中只有一个可以一次打开。相反，只需使用collapse即可切换页面部分的可见性。

面板可见性

来自collapse docs：

  

崩溃插件使用了几个类来处理繁重的工作：

     

  
• .collapse隐藏了内容
  
• .collapse.in显示内容
  转换开始时添加
• .collapsing，完成转换后删除
• collapse   

因此，要开始折叠，只需确保您的额外内容包含课程in而不是data-toggle="collapse"

简单HTML

要使用折叠，您只需要指定data-target，然后将折叠指向要使用<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#"> Read More / Less </a> <div id="ReadMoreInfo" class="collapse"> <p> More Info Here </p> </div> 切换的部分的css选择器。

这是一个简单的公开折叠功能的例子：

<div class="panel panel-default">

    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" 
               data-target="#ReadMoreInfo"
               href="#ReadMoreInfo">
                Read More / Less
            </a>
        </h4>
    </div>

    <div id="ReadMoreInfo" class="panel-collapse collapse">
        <div class="panel-body">
            <p>more info.</p>
            <h4 class="title">More titles</h4>
            <p>more content</p>
        </div>
    </div>

</div>

带Bootstrap类的HTML

所有其他引导类只是为了使可折叠面板看起来像一样可折叠面板。我建议像这样格式化它们或者做很多自定义CSS工作。即使你想自己做CSS，从这个模板开始然后覆盖样式也是最好的。

{{1}}

Working Demo in jsFiddle

<强>截图：

Answer 3

在我的情况下删除in类对我来说不起作用（尽管通常应该这样）。我昨天只是在寻找这个问题的答案。我用它来使手风琴默认关闭：

$( document ).ready(function() {
   $('.collapse').collapse({
     toggle: false
   });
});

另见以下问题：

Jquery accordion not collapse by default

Answer 4

如果手风琴带有图标，请将折叠的类名添加到：

<a class="accordion-toggle accordion-toggle-styled collapsed" >

并将折叠类名称添加到：

<div id="collapse0" class="panel-collaps collapse">

完整代码是：

    <div class="panel-group accordion" id="accordion0">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
                                                    Collapsible Header Text
                                                </a>
                                            </h4>
</div>
                                        <div id="collapse_3_1" class="panel-collaps collapse">
                                            <div class="panel-body">

                                                <p> body text
                                                </p>
                                            </div>
                                        </div>
                                    </div>

</div>

Answer 5

很简单。在 Bootstrap 5 中，编辑 HTML 以从第一个手风琴项目中删除“show”类。请参阅Make accordion closed by default in Bootstrap，以“最近正在使用 Bootstrap”开头的答案。