纯css实现多级折叠菜单折叠树效果

下面是“纯CSS实现多级折叠菜单折叠树效果”的完整攻略：

什么是多级折叠菜单折叠树效果

多级折叠菜单折叠树效果是一种常用的导航菜单，它可以使页面更加结构化和易于导航。它具有如下特点：

1. 可以展开/折叠子菜单
2. 可以自动更改父菜单的状态
3. 可以实现嵌套的多级菜单结构

如何实现多级折叠菜单折叠树效果

多级折叠菜单折叠树效果可以通过CSS中的checkbox和label结合CSS选择器实现。具体步骤如下：

1. HTML结构

首先，我们需要创建一些HTML元素来表示菜单的结构，例如：

<ul class="menu">
  <li>
      <input type="checkbox" id="item-1" />
      <label for="item-1">Item 1</label>
      <ul>
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
          <li>
              <input type="checkbox" id="sub-item-1" />
              <label for="sub-item-1">Sub Item 3</label>
              <ul>
                  <li>Sub Sub Item 1</li>
                  <li>Sub Sub Item 2</li>
                  <li>Sub Sub Item 3</li>
              </ul>
          </li>
      </ul>
  </li>
  <li>
      <input type="checkbox" id="item-2" />
      <label for="item-2">Item 2</label>
      <ul>
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
      </ul>
  </li>
</ul>

在这个例子中，我们使用了无序列表(<ul>)和列表项(<li>)表示菜单的结构。每个菜单项有一个<input>元素和一个<label>元素，input元素的type属性设置为checkbox，label元素的for属性指向input元素的id，这样点击label元素时就会触发input元素的状态改变。同时，子菜单也使用了相同的HTML结构，只是在层级上下一级。

1. 设置样式

接下来，我们需要设置菜单项的样式，例如：

.menu li ul {
  display: none;
}

.menu li input:checked ~ ul {
  display: block;
}

我们使用了CSS选择器来控制菜单项的显示和隐藏，当input元素被选中时，它后面的ul元素会显示出来。

同时，我们还需要添加一些类似动画的效果来使菜单的展开和折叠更加平滑。例如：

.menu li input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.menu li label {
  cursor: pointer;
  padding-left: 20px;
  position: relative;
  display: inline-block;
}

.menu li label:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #ddd;
}

.menu li input[type="checkbox"]:checked + label:before {
  background-color: #ddd;
}

在这个例子中，我们使用绝对定位来控制input元素的位置，同时将opacity属性设置为0，以便元素在屏幕上不可见。我们还使用CSS伪类:before来添加对应菜单项的圆点符号，并通过改变background-color属性来控制圆点符号的颜色。

示例1

下面是一个简单的多级折叠菜单折叠树的示例：

<ul class="menu">
    <li>
        <input type="checkbox" id="item-1" />
        <label for="item-1">Item 1</label>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>
                <input type="checkbox" id="sub-item-1" />
                <label for="sub-item-1">Sub Item 3</label>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 4</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" id="item-2" />
        <label for="item-2">Item 2</label>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ul>

.menu li ul {
    display: none;
}

.menu li input:checked ~ ul {
    display: block;
}

.menu li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.menu li label {
    cursor: pointer;
    padding-left: 20px;
    position: relative;
    display: inline-block;
}

.menu li label:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #ddd;
}

.menu li input[type="checkbox"]:checked + label:before {
    background-color: #ddd;
}

示例2

接下来是一个更复杂的多级折叠菜单折叠树的示例：

<ul class="menu">
    <li>
        <input type="checkbox" id="item-1" />
        <label for="item-1">Item 1</label>
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>
                <input type="checkbox" id="sub-item-1" />
                <label for="sub-item-1">Sub Item 3</label>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 4</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" id="item-2" />
        <label for="item-2">Item 2</label>
        <ul>
            <li>
                <input type="checkbox" id="sub-item-2" />
                <label for="sub-item-2">Sub Item 1</label>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                </ul>
            </li>
            <li>Sub Item 2</li>
            <li>
                <input type="checkbox" id="sub-item-3" />
                <label for="sub-item-3">Sub Item 3</label>
                <ul>
                    <li>
                        <input type="checkbox" id="sub-sub-item-1" />
                        <label for="sub-sub-item-1">Sub Sub Item 1</label>
                        <ul>
                            <li>Sub Sub Sub Item 1</li>
                            <li>Sub Sub Sub Item 2</li>
                            <li>Sub Sub Sub Item 3</li>
                        </ul>
                    </li>
                    <li>Sub Sub Item 2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

.menu li ul {
    display: none;
}

.menu li input:checked ~ ul {
    display: block;
}

.menu li input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.menu li > ul {
    margin-left: 20px;
    margin-top: 0;
}

.menu li label {
    cursor: pointer;
    padding-left: 20px;
    position: relative;
    display: inline-block;
}

.menu li label:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #ddd;
}

.menu li input[type="checkbox"]:checked + label:before {
    background-color: #ddd;
}

.menu li input:checked ~ label:before {
    transform: translateY(-50%) rotate(90deg);
}

在这个示例中，我们增加菜单项的嵌套层数，并使用>选择器来控制子菜单的缩进。我们还增加了rotate和transform属性来控制圆点符号的动画效果。