マテリアルデザイン折りたたみリストが展開可能なアニメーションが機能しないのはなぜですか？

Question

私は自分のウェブサイトで素材デザインを使用しています。私は、折りたたみ可能なリストで構成された一種のコメントセクションを持っています。折りたたみモードを「拡張可能」に設定することで、ユーザーが複数のコメントを開くことができるようにしたいと考えています。それは私の望むことをしますが、新しいコメントを開くスライドアニメーションは機能しません。アニメーションのコメントだけを表示します。しかし、（クリックすることで）閉じたい場合は、完全にスライドします。

したがって、（閉じているとき）上にスライドしますが、下には開いていません。

例：thisページの下部に拡張可能なリスト。

ご覧のとおり、折りたたみ可能なリストは展開可能です。

ビュー（私はセット内容をdynamicllyするためにカミソリを使用しています）：

<ul class="collapsible" data-collapsible="expandable"> 
    @foreach (var item in Model) 
    { 
     <li> 
      <div class="collapsible-header"> 
       //Comment preview and date here... 
      </div> 
      <div class="collapsible-body"> 
       //Display comment text etc here... 
      </div> 

     </li> 
    } 
</ul> 

をそして、これは初期化が文書レディ機能であるJS。私はアコーディオンを 'true'に変更しようとしましたが、すべてのアニメーションが完璧に動作します。私はまた、 'expandable = true'を設定しようとしましたが、それが問題なのかどうかは確信しています。

Javascriptを：

$('.collapsible').collapsible({ 
    accordion: false 
}); 

私は本当にすべての助けに感謝。これは試験のための私の仕事ですので、少し重要です:)

Answer 1

マニュアル/例は本当に明確です。まず：あなたのjsが実行されているとき？それはdoc readyイベントの中にありますか？そして例を調べると、liの内容がヘッダとボディに分割されます。あなたの例はそれを逃す。