Bootstrap data-toggle 在第二次点击后折叠 div，而不是第一次答案

【问题标题】：Bootstrap data-toggle collapses div after second click, not firstBootstrap data-toggle 在第二次点击后折叠 div，而不是第一次
【发布时间】：2022-01-16 18:31:29
【问题描述】：

我有 simple example 与 Bootstrap 并通过单击切换 div。这是标记：

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

当用户点击标题为“打开！”的链接时底层 div 展开或折叠。 Div 最初是展开的，当用户第一次点击时它没有效果。然后，如果用户第二次点击，div 就会崩溃。

original example 中的 div 最初是折叠的，但我希望它可以打开。我该如何解决这个问题？

【问题讨论】：

标签： html css twitter-bootstrap toggle

【解决方案1】：

只需将类 'collaspe in' 添加到 class="accordion-body"。

在CODEPEN查看示例代码

HTML：

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

我希望这能解决您的问题。享受:)

【讨论】：

【解决方案2】：

<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

这将使其可折叠，但默认显示面板。当您单击折叠按钮时，它会在第一次单击时折叠面板。

我只是在这里添加这个，如果有人想要这样做的话。我在搜索它的逆时找到了这个链接。希望对您有所帮助！

【讨论】：

只需将“显示”添加到可折叠元素类对我有用。我猜它初始化了元素的状态，这样它就不必在第一个事件上初始化。

【解决方案3】：

你应该只打电话给bootstrap.min.js 一个。确保在 <head> 部分中只调用一次引导文件。如果你在 Laravel 或任何类型的框架中使用 Bootstrap，请记住 npm run dev 编译 app.js 中的 bootstrap js 文件。可能是这样。

【讨论】：

【解决方案4】：

我遇到了这个问题，在我的例子中，我愚蠢地在我想要折叠的 div 中插入了两个“类”属性：

<div class="something" id="mydiv" class="collapse in"> <div>

浏览器似乎消除了第二类属性而不是合并它们。

通过将两个类属性“合并”在一起，我的问题得到了解决：

<div id="mydiv" class="something collapse in"> <div>

【讨论】：

【解决方案5】：

<div id="collapseOne" class="accordion-body collapse">

这也会使其默认关闭并在点击时打开

【讨论】：

【解决方案6】：

我也有这个问题。设置id和data-bs-parent

【讨论】：