實現嵌套摺疊

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