javascript - 使用 Materialise 嵌套可折叠

Question

我正在研究 Meteor当前使用 Materialize 的项目.我可以实现 Collapsible元素精细

但是当我尝试创建嵌套的可折叠对象时，它看起来并不正确(请注意上方和下方的间距，更不用说缺少通常指示嵌套列表的缩进)。这是 Materialise 的缺点还是我的尝试有缺陷？

我正在尝试用示例代码实现它

<ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body">
              <ul class="collapsible" data-collapsible="accordion">
                <li>
                    <div class="collapsible-header"><i class="material-icons">filter_drama</i>Nested First</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">place</i>Nested Second</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
                <li>
                    <div class="collapsible-header"><i class="material-icons">whatshot</i>Nested Third</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                </li>
               </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
        <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
        </li>
    </ul>

Answer 1

我遇到了同样的问题，并且能够通过执行以下任一操作来嵌套可折叠对象:

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

2. 用 class = "container"将嵌套的可折叠组件包裹在一个 div 中，或者

3. 将嵌套的可折叠组件包装在一个容器 div、一个行 div 和一个列 div(上面 1 和 2 的组合)中，或者

4. 将嵌套的可折叠组件包裹在一个 div 样式中，并使用您想要的任何值的填充

执行上面的 #1 使嵌套的可折叠对象稍微变小，并带有一些填充，因此它会稍微缩进。执行 #2 或 #3 会使嵌套的可折叠对象变得更小并将其居中，从而导致更大的缩进。 #4 让您最大程度地控制嵌套的外观。

我认为第 4 种方式，即带内边距的样式，是实现这一点的最佳方式。

我修改了原始 HTML 以演示这些方法:

<ul class="collapsible" data-collapsible="accordion">
	<li>
		<div class="collapsible-header">
			<i class="material-icons">filter_drama</i>First</div>
		<div class="collapsible-body">
			<div class="row">
				<div class="col s12 m12">
					<ul class="collapsible" data-collapsible="accordion">
						<li>
							<div class="collapsible-header">
								<i class="material-icons">filter_drama</i>Nested First</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
						<li>
							<div class="collapsible-header">
								<i class="material-icons">place</i>Nested Second</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
						<li>
							<div class="collapsible-header">
								<i class="material-icons">whatshot</i>Nested Third</div>
							<div class="collapsible-body">
								<p>Lorem ipsum dolor sit amet.</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">place</i>Second</div>
		<div class="collapsible-body">
			<div class="container">
				<ul class="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">
							<i class="material-icons">filter_drama</i>Nested First</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">place</i>Nested Second</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">whatshot</i>Nested Third</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">whatshot</i>Third</div>
		<div class="collapsible-body">
			<div class="container">
				<div class="row">
					<div class="col s12 m12">
						<ul class="collapsible" data-collapsible="accordion">
							<li>
								<div class="collapsible-header">
									<i class="material-icons">filter_drama</i>Nested First</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
							<li>
								<div class="collapsible-header">
									<i class="material-icons">place</i>Nested Second</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
							<li>
								<div class="collapsible-header">
									<i class="material-icons">whatshot</i>Nested Third</div>
								<div class="collapsible-body">
									<p>Lorem ipsum dolor sit amet.</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</li>
	<li>
		<div class="collapsible-header">
			<i class="material-icons">filter_drama</i>Fourth</div>
		<div class="collapsible-body">
			<div style="padding:25px">
				<ul class="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">
							<i class="material-icons">filter_drama</i>Nested First</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">place</i>Nested Second</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
					<li>
						<div class="collapsible-header">
							<i class="material-icons">whatshot</i>Nested Third</div>
						<div class="collapsible-body">
							<p>Lorem ipsum dolor sit amet.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

我还创建了一个上面的代码笔来演示嵌套的可折叠对象，请参见下面的链接:

Nested Collapsibles in Materialize