具有Materialise的嵌套可折叠

Question

我正在使用Materialise处理一个Meteor项目.我可以很好地实现可折叠元素

但是当我尝试创建嵌套的Collapsibles时,它看起来并不正确(请注意上方和下方的间距,更不用说缺少通常表示嵌套列表的缩进).这是物化的缺点还是我的尝试有缺陷？

我试图用示例代码实现它

<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和col div(上面的1和2的组合)中,或者

4. 将嵌套的可折叠包装在div中,该div使用您想要的任何值的填充样式

执行上面的#1会使嵌套的可折叠稍微小一点,并使用一点填充,使其略微缩进.执行#2或#3会使嵌套的可折叠小得多,并使其居中,从而产生更大的缩进.#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>

我还创建了一个上面的codepen来演示嵌套的可折叠,请参阅下面的链接:

物化中的嵌套可折叠物