0

でネストされたアコーディオンを使用していMaterializecssます。アコーディオンをネストできるようにしたいのですが、各レベルでアコーディオンのアイテムを 1 つだけ開くようにします (現在data-collapsible='accordion')。

私はそれを動作させることができません:data-collapsible='accordion'ネストされたアコーディオンを開くことができないと設定すると、data-collapsible='collapsible'アコーディオンごとに任意の数のアイテムを開くことができます。

回避策はありますか？

ありがとう！

4

1 に答える 1

0

折りたたみ可能な要素の内部要素を動的に管理している場合は、「materialize.js」に含まれる jquery メソッドを使用してそれらを「初期化」する必要があります。これは、こちらの「materializecss」ドキュメントに書かれています。

実践例を紹介します。

次の HTML が与えられた場合:

    ...
        <ul class="collapsible" data-collapsible="accordion">
          <li>
          <div class="collapsible-header">
            My nested collapsible
          </div>
          <div class="collapsible-body">
            <ul class="nested collapsible" data-collapsible="accordion">
              <!-- No data initially -->
            </ul>
          </div>
          </li>
        <li>
          <div class="collapsible-header">Second</div>
          <div class="collapsible-body">
            <p>Normal data...</p>
          </div>
        </li>
        
        </ul>
    ...

「.nested」divにデータを追加していて、期待どおりにアコーディオンとして機能していないために問題が発生したと思います。

次に、次のようなことを行う必要があります。

// ... Your handler code ...
// ... Data appended into $('.nested')
$('.nested').collapsible({accordion: true});
// ...

{accordion: true} オプションは、デフォルトでアコーディオンとして扱われるため、必須ではありません。

この場合はうまくいくはずです。幸運を。

于 2015-08-10T18:41:21.573 に答える