实现嵌套折叠

Question

我正在使用Materialize在分钟工作Meteor项目。我可以实现Collapsible要素精细

，但是当我尝试创建嵌套Collapsibles它看起来不正确（注意上方的间距及以下的，更何况缺乏缩进通常会指示嵌套列表）。这是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

Collapsibles都没有考虑嵌套collapsibles风格去实现它。您可以添加自定义CSS只造型内部可折叠，以帮助这个风格：

.collapsible .collapsible { 
    margin: 0; 
} 

您也可以玩的填充或边框，以帮助更清楚地表明它是外可折叠的内另一可折叠。

Answer 2

我有同样的问题，并能巢collapsibles通过执行以下任一操作：

1. 裹嵌套可折叠在网格的行和列跨越包含元件的整个宽度，或

2. 裹嵌套可折叠与类=“容器”一个div，或

3. 裹在容器DIV，行的div嵌套可折叠和山口DIV（1和2上方的组合）或

4. 裹在任何值的填充样式div的，嵌套的可折叠你想

表演＃1以上，使嵌套的可折叠的只是一点点填充略小，使其稍微缩进。做＃2或＃3使嵌套可折叠的小得多，并居中，导致更大的缩进。 ＃4让您能够最大限度地控制嵌套的外观。

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

我已经修改了原来的HTML来演示这些方法：

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

我也创造了高于一个codepen演示嵌套collapsibles，见下面的链接：

Nested Collapsibles in Materialize