Question

我正在使用Materializecss的嵌套手风琴。我希望能够拥有嵌套的手风琴，但是让每个级别只打开一个手风琴项目（从data-collapsible='accordion'开始）。

我无法让它工作：如果我设置data-collapsible='accordion'我无法打开嵌套手风琴，如果我设置data-collapsible='collapsible'，我可以为每个手风琴打开任意数量的项目。

任何解决方法？

谢谢！

Answer 1

如果你正在以恐怖的方式管理可折叠的内部元素，那么你需要＆＃34;初始化＆＃34;他们使用＆＃34; materialize.js＆＃34;中包含的jquery方法。这是用＆＃34; materializecss＆＃34;文档here。

我将提供一个实际的例子。

鉴于下一个HTML：

＆＃13;

    ...
        <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>
    ...

＆＃13;

我认为问题的出现是因为您要将数据附加到＆＃34; .nested＆＃34; div，并没有像预期的那样用作手风琴。

然后您应该执行以下操作：

＆＃13;

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

＆＃13;

{accordion：true}选项不是强制性的，因为默认情况下它将被视为手风琴。

它应该适用于这种情况。祝你好运。

如何允许嵌套手风琴，但使用materializecss管理顶级手风琴（而不是可折叠）？

1 个答案: