Javascript 带有Materialize的嵌套可折叠文件

我现在正在做一个项目，这个项目使用了。我可以很好地实现元素

但是，当我尝试创建嵌套的可折叠文件时，它看起来并不正确（注意上面和下面的间距，更不用说缺少通常表示嵌套列表的缩进）。这是物化的缺点还是我的尝试有缺陷

我正试图用示例代码实现它

先过滤


先过滤你的头发
Lorem ipsum dolor sit amet



第二位
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet





次席
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet

折叠文件的样式没有考虑嵌套折叠文件。通过仅设置内部可折叠的样式，可以添加自定义css来帮助设置此样式：

.collapsible .collapsible {
  margin: 0;
}

---

您还可以使用填充物或边框来帮助更清楚地表明它是外部可折叠内部的另一个可折叠部分。

可折叠部分没有考虑嵌套可折叠部分的样式。通过仅设置内部可折叠的样式，可以添加自定义css来帮助设置此样式：

.collapsible .collapsible {
  margin: 0;
}

---

您还可以使用填充物或边框来帮助更清楚地显示它是外部可折叠的内部可折叠的。我也遇到了同样的问题，通过执行以下任一操作可以嵌套可折叠的：

在横跨包含元素整个宽度的网格行和列中包裹嵌套的可折叠对象，或

用class=“container”将嵌套的可折叠文件包装在div中，或

将嵌套的可折叠对象包装在容器div、行div和列div（上面1和2的组合）中，或

将嵌套的可折叠文件包装在一个div中，并使用您想要的任何值作为填充

执行上面的#1会使嵌套的可折叠部分稍微变小，并添加一些填充，使其略微缩进。执行#2或#3会使嵌套的可折叠部分变得更小，并使其居中，从而产生更大的缩进#4可以最大程度地控制嵌套的外观

我认为第四种方式，即填充样式，是实现这一点的最佳方式

我修改了原始HTML以演示以下方法：

先过滤


先过滤你的头发
Lorem ipsum dolor sit amet



第二位
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet





次席


先过滤你的头发
Lorem ipsum dolor sit amet



第二位
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet





第三名是什么


先过滤你的头发
Lorem ipsum dolor sit amet



第二位
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet





第四个过滤器


先过滤你的头发
Lorem ipsum dolor sit amet



第二位
Lorem ipsum dolor sit amet



第三名是什么
Lorem ipsum dolor sit amet

我也遇到了同样的问题，通过执行以下任一操作，我能够嵌套可折叠文件：

在横跨包含元素整个宽度的网格行和列中包裹嵌套的可折叠对象，或

用class=“container”将嵌套的可折叠文件包装在div中，或

将嵌套的可折叠对象包装在容器div、行div和列div（上面1和2的组合）中，或

将嵌套的可折叠文件包装在一个div中，并使用您想要的任何值作为填充

执行上面的#1会使嵌套的可折叠部分稍微变小，并添加一些填充，使其略微缩进。执行#2或#3会使嵌套的可折叠部分变得更小，并使其居中，从而产生更大的缩进#4可以最大程度地控制嵌套的外观

我认为第四种方式，即填充样式，是实现这一点的最佳方式

我修改了原始HTML以演示以下方法：