javascript - Bootstrap'collapsed'类未出现在DOM加载中

我有一个使用Bootstrap的Collapse功能的手风琴菜单，我尝试根据Bootstrap用于显示和隐藏可折叠元素的CSS类对它进行样式设置。

我的问题是，当文档完全加载后，collapsed类未加载到折叠的元素上，而它们却显示为折叠的。因此，我的页面使用“开放”样式进行渲染，而每个可折叠元素都按应有的方式折叠。在最初的几次单击之后，出现了collapsed类，并且样式应按预期进行。

将collapsed类强加到DOM加载后的每个元素上是解决问题的一种麻烦方法，但是样式仍会显示一秒钟，然后再进行更改。

为了说明这一点，这应该正在发生：

崩溃状态

未折叠状态

但是相反，在加载时，由于collapsed类根本不存在，我得到了这一点：


有什么办法可以解决吗？

编辑：代码包含（忽略剃刀片段）

<button class="category-select" data-toggle="collapse" data-target="#collapsible-@i">@fieldset.GetValue("title")</button>
    <div id="collapsible-@i" class="collapse">
        <div class="category-inner">
            @Html.Raw(@fieldset.GetValue("innerText"))
        </div>
    </div>

最佳答案

刚刚意识到我根据存在的样式做错了什么。我应该做的就是自己将collapsed类添加到html中。

该代码实际上应该如下所示：

<button class="category-select collapsed" data-toggle="collapse" data-target="#collapsible-@i">@fieldset.GetValue("title")</button>
<div id="collapsible-@i" class="collapse">
    <div class="category-inner">
        @Html.Raw(@fieldset.GetValue("innerText"))
    </div>
</div>

然后，将正确的样式应用于加载，准备好单击即可删除collapsed。

非常愚蠢的错误。