嵌套列表-在单独的一行上显示每个ul级别

Nested lists - show each ul level on a separate line

本文关键字：显示 一行 级别 ul 列表 单独 嵌套      更新时间：2023-09-26

我正在使用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

我仍然面临的最大问题之一是，由于活动列表是绝对定位的，它们显示在紧接着这个过滤器列表的内容之上，而不是向下推。你可以在这把小提琴上看到这种行为。此外，当屏幕尺寸减小时，事情不会像我期望的那样流动/中断（以及将绝对定位的按钮放在其他绝对定位的项目上）。

有没有办法只使用CSS（也许使用相对定位？）来实现这一点，或者我必须在现有的基础上添加大量的Javascript？或者我应该去掉嵌套列表，而选择多个"平面"列表吗？

您可以仅使用常规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>

演示jsFiddle

相关文章：