嵌套列表 - 在單獨的行上顯示每個ul級別

Question

我正在使用jQuery的同位素插件來過濾條目列表，使用下面的標記來列出可能的過濾器列表。所有頂級列表項目最初都是可見的，如果我點擊特定的過濾器按鈕，則會顯示任何子過濾器（如果有的話）。

這一切都很好。然而，我遇到了一些問題，讓CSS正確顯示列表。標記是：

<ul class="filter-list"> 
    <li><button data-filter="*">show all</button></li> 
    <li> 
    <button data-filter=".filter1">Filter 1</button> 
    <ul class="sub-filter"> 
     <li> 
     <button data-filter=".filter1.filtera">Filter 1,A</button> 
     <ul class="sub-filter"> 
      <li><button data-filter=".filtera.filteri">Filter 1,A,i</button></li> 
      <li><button data-filter=".filtera.filterii">Filter 1,A,ii</button></li> 
      <li><button data-filter=".filtera.filteriii">Filter 1,A,iii</button></li> 
     </ul> 
     </li> 
     <li><button data-filter=".filter1.filterb">Filter 1,B</button></li> 
     <li> 
     <button data-filter=".filter1.filterc">Filter 1,C</button> 
     <ul class="sub-filter"> 
      <li><button data-filter=".filterc.filteri">Filter 1,C,i</button></li> 
      <li><button data-filter=".filterc.filterii">Filter 1,C,ii</button></li> 
     </ul> 
     </li> 
     <li> 
     <button data-filter=".filter1.filterd">Filter 1,D</button> 
     <ul class="sub-filter"> 
      <li><button data-filter=".filterd.filteri">Filter 1,D,i</button></li> 
      <li><button data-filter=".filterd.filterii">Filter 1,D,ii</button></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><button data-filter=".filter2">Filter 2</button></li> 
    <li><button data-filter=".filter3">Filter 3</button></li> 
</ul> 

的CSS，我至今是：

ul.filter-list { 
    display:inline-block; 
    position: relative; 
    width: 100%; 
    margin:0; 
    padding:0; 
} 

ul.filter-list ul { 
    display: none; 
    position:relative; 
} 

.filter-list ul.active-filter { 
    display: block; 
    position:absolute; 
    top:50px; 
    left:0px; 
} 

ul.filter-list li { 
    list-style-type: none; 
    display: inline-block; 
} 

預期的輸出，我需要的是讓每個在單行列表的「等級」，其次是下一個「級別」的過濾器（如果有的話）是當前活動的過濾器。最初，它應該是這樣的：

show all Filter 1 Filter 2 Filter 3 

如果我點擊Filter 1，然後按鈕的一個新的水平之下是過濾器應該顯示的下一行：

show all Filter 1 Filter 2 Filter 3 
Filter 1,A Filter 1,B Filter 1,C Filter 1,D 

如果我然後點擊在Filter 1,C，按鈕的第三級將需要顯示在第三行：

show all Filter 1 Filter 2 Filter 3 
Filter 1,A Filter 1,B Filter 1,C Filter 1,D 
Filter 1,C,i Filter 1,C,ii 

一個我仍然有我的最大問題是，由於活動列表絕對定位，它們將顯示在緊隨此過濾器列表之後的內容之上，而不是將其推倒。您可以在this fiddle中看到此行爲。此外，當屏幕尺寸減小時，事物不會像我期望的那樣流動/斷開（並且絕對定位按鈕位於其他絕對定位的項目之上）。

有沒有一種方法可以使用CSS（也許使用相對定位？）來完成此操作，還是我將不得不向我所添加一些過量的Javascript？或者我應該取出嵌套列表來支持多個'平面'列表？

Answer 1

您可以直接用普通CSS和jQuery/Javascript切換項目的知名度達到這一點必須：

$(function() { 
 
    $('button').on('click', function() { 
 
    // The element to be toggled (show/hide). 
 
    var toToggle = $(this).next('.sub-filter'); 
 

 
    // Go through its parents until the element 
 
    // with class sub-filter and find its 
 
    // children with this same class to hide 
 
    // them, excluding itself. 
 
    $(this).parents('.sub-filter').find('.sub-filter').not(toToggle).hide(); 
 
    
 
    // Toggle the target. 
 
    toToggle.toggle(); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
ul.filter-list, 
 
ul.filter-list li { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul.sub-filter { 
 
    /* Giving them the full width and 
 
    floating them you guarantee their 
 
    place in a new line. */ 
 
    width: 100%; 
 
    float: left; 
 
    display: none; 
 
    /* Setting their padding to 0 will 
 
    keep them aligned to the line above 
 
    them. */ 
 
    padding: 0; 
 
} 
 
ul.filter-list > li, 
 
ul.sub-filter > li { 
 
    /* Setting their display to inline 
 
    will show them next to each other. */ 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="filter-list"> 
 
    <li> 
 
    <button data-filter="*">show all</button> 
 
    </li> 
 
    <li> 
 
    <button data-filter=".filter1">Filter 1</button> 
 
    <ul class="sub-filter"> 
 
     <li> 
 
     <button data-filter=".filter1.filtera">Filter 1,A</button> 
 
     <ul class="sub-filter"> 
 
      <li> 
 
      <button data-filter=".filtera.filteri">Filter 1,A,i</button> 
 
      </li> 
 
      <li> 
 
      <button data-filter=".filtera.filterii">Filter 1,A,ii</button> 
 
      </li> 
 
      <li> 
 
      <button data-filter=".filtera.filteriii">Filter 1,A,iii</button> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <button data-filter=".filter1.filterb">Filter 1,B</button> 
 
     </li> 
 
     <li> 
 
     <button data-filter=".filter1.filterc">Filter 1,C</button> 
 
     <ul class="sub-filter"> 
 
      <li> 
 
      <button data-filter=".filterc.filteri">Filter 1,C,i</button> 
 
      </li> 
 
      <li> 
 
      <button data-filter=".filterc.filterii">Filter 1,C,ii</button> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <button data-filter=".filter1.filterd">Filter 1,D</button> 
 
     <ul class="sub-filter"> 
 
      <li> 
 
      <button data-filter=".filterd.filteri">Filter 1,D,i</button> 
 
      </li> 
 
      <li> 
 
      <button data-filter=".filterd.filterii">Filter 1,D,ii</button> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <button data-filter=".filter2">Filter 2</button> 
 
    </li> 
 
    <li> 
 
    <button data-filter=".filter3">Filter 3</button> 
 
    </li> 
 
</ul>

Demo jsFiddle