DOM loadにBootstrap 'collapsed'クラスが表示されない

Question

BootstrapのCollapse機能を使用してアコーディオンメニューを取得しました。ブートストラップが折り畳み要素を表示および非表示にするCSSクラスに基づいてスタイルを設定しようとしました。

私の問題は、ドキュメントが完全にロードされたときに、折りたたまれて表示されている間に、collapsedクラスが折りたたまれた要素に読み込まれないということです。それで、私のページは「開いた」スタイリングでレンダリングされますが、折りたたみ可能な要素はすべて折りたたまれているはずです。最初の数回のクリックの後に、collapsedクラスが存在し、スタイリングが正しく動作します。

collapsedクラスを強制的にDOMの各要素にロードすると、問題を解決するのが面倒な方法ですが、変更前にスタイリングがまだ1秒間表示されます。説明するために

、これが起こってする必要があります。

折りたたまれた状態

沈胴時

しかし、その代わりに、負荷に、私は単に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> 

Answer 1

はちょうど私が間違って存在しているスタイルに基づいたものを実現します。私がしなければならないことは、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の準備ができて、負荷に適用されます。

非常に愚かな間違い。