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

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

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

另请参阅以下问题：

Jquery accordion not collapse by default

Answer 3

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

面板可见性

来自collapse docs：

collapse 插件利用几个类来处理繁重的工作：

• .collapse 隐藏内容
• .collapse.in 显示内容
• .collapsing 在过渡开始时添加，并在过渡结束时删除

因此，要开始折叠，只需确保您的额外内容具有 collapse 类而不是 in

简单的 HTML

要使用折叠，您实际上只需要指定一个data-toggle="collapse"，然后将折叠指向您要使用data-target 切换的部分的css 选择器。

这是一个简单的示例，它只公开了折叠功能：

<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
    Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
    <p> More Info Here </p>
</div>

带有引导类的 HTML

所有其他引导类只是为了帮助使可折叠面板看起来像一个可折叠面板。我建议像这样格式化它们或做很多自定义 CSS 工作。即使您想自己编写 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>

Working Demo in jsFiddle

截图：

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”开头的答案。