html - 制作类似于 Windows 资源管理器的下拉树形菜单

Question

我想知道是否有一种方法可以制作类似于树的下拉菜单，类似于使用 HTML/CSS 和 Bootstrap 的 Windows 资源管理器。

例子:

如果有任何帮助，我将不胜感激。

Answer 1

检查这个!我希望它对你有用

[data-ui-css-component="treeview"] {
  margin: 20px;
  font-family: Verdana;
  font-size: 14px;
  color: #9C27B0;
}
[data-ui-css-component="treeview"] [type=checkbox] {
  display: none;
}
[data-ui-css-component="treeview"] ul {
  padding: 0 0 0 40px;
  display: none;
  list-style: none;
}
[data-ui-css-component="treeview"] ul:first-child {
  padding-left: 0;
}
[data-ui-css-component="treeview"] li {
  padding: 0;
}
[data-ui-css-component="treeview"] li span {
  margin: 2px 0;
  display: list-item;
  list-style: square;
}
[data-ui-css-component="treeview"] label {
  display: inline-block;
  transition: 0.2s;
  padding-right: 10px;
  margin: 5px 0;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}
[data-ui-css-component="treeview"] label::before {
  display: inline-block;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  background: #9C27B0;
  color: #FFF;
}
[data-ui-css-component="treeview"] ul:first-child, [data-ui-css-component="treeview"] [type=checkbox]:checked ~ ul {
  display: block;
}
[data-ui-css-component="treeview"] [type=checkbox]:checked ~ label::before {
  content: "-";
}
[data-ui-css-component="treeview"] [type=checkbox]:not(:checked) ~ label::before {
  content: "+";
}

<div data-ui-css-component="treeview">
  <ul>
    <li>
      <input type="checkbox" id="item1"/>
      <label for="item1">Item 1</label>
      <ul>
        <li>
          <input type="checkbox" id="item1.1"/>
          <label for="item1.1">Item 1.1</label>
          <ul>
            <li><span>Item 1.1.1</span></li>
            <li><span>Item 1.1.2</span></li>
          </ul>
        </li>
        <li>
          <input type="checkbox" id="item1.2"/>
          <label for="item1.2">Item 1.2</label>
          <ul>
            <li><span>Item 1.2.1</span></li>
            <li><span>Item 1.2.2</span></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="item2"/>
      <label for="item2">Item 2</label>
      <ul>
        <li><span>Item 2.1</span></li>
        <li><span>Item 2.2</span></li>
        <li><span>Item 2.3</span></li>
        <li><span>Item 2.4</span></li>
      </ul>
    </li>
  </ul>
</div>