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

Question

我正在使用嵌套手风琴Materializecss。我希望能够嵌套手风琴，但要让每个级别只打开 1 项手风琴（截至data-collapsible='accordion'）。

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

任何解决方法？

谢谢！

Answer 1

如果您正在动态管理可折叠的内部元素，那么您需要使用“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} 选项不是强制性的，因为默认情况下它将被视为手风琴。

它应该在这种情况下工作。祝你好运。