html - 带有图标的纯 CSS 可折叠列表

Question

我正在尝试用纯 CSS 创建一个独立的可折叠 HTML 列表。目前基于这篇文章:http://www.thecssninja.com/css/css-tree-menu .

我调整了演示以满足我的需要(例如，仅使用 +/- 按钮折叠/展开)。不幸的是，我无法摆脱(不需要的？)<span>元素，因为它弄乱了标签位置。

这是我目前使用的代码:

<ul class="tree">
  <li><span>Root</span><input type="checkbox"/>
    <ul>
      <li class="lib"><span>Sub1</span><input type="checkbox"><ul>
        <li class="itm">Item1
        <li class="itm">Item2
      </ul></li>
      <li><span>Sub2</span><input type="checkbox"><ul>
        <li class="itm">Item1</li>
      </ul></li>
      <li><span>Sub3</span><input type="checkbox"><ul>
        <li class="itm">Item1</li>
      </ul></li>
    </ul>
  </li>
</ul>

这里是完整的示例，但没有 <span>元素，复选框隐藏在乱七八糟的标签后面:

ul.tree {
  padding: 0 0 0 30px
}
li {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 15px 1px no-repeat;
  position: relative;
  margin-left: -15px;
  list-style: none
}
li.itm {
  margin-left: -1px !important;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 0 0 no-repeat;
  padding-left: 21px
}
li input {
  position: absolute;
  left: 0;
  margin-left: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
  height: 1em;
  width: 1em;
  top: 0
}
li input + ul {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAGUlEQVR4XmMIDXVgAMMGCPZagWCDYGioAwCQxAgHBIBVQwAAAABJRU5ErkJggg==) 44px 0 no-repeat;
  margin: -0.938em 0 0 -44px;
  height: 1em
}
li input + ul > li {
  display: none;
  margin-left: -14px !important;
  padding-left: 1px
}
li span {
  display: block;
  padding-left: 37px
}
li input:checked + ul {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAFUlEQVR4XmMIDXVgQIZeK1D5oaEOAGzEBgf+DZdOAAAAAElFTkSuQmCC) 44px 5px no-repeat;
  margin: -1.25em 0 0 -44px;
  padding: 1.563em 0 0 80px;
  height: auto
}
li input:checked + ul > li {
  display: block;
  margin: 0 0 0.125em
}
li input:checked + ul > li:last-child {
  margin: 0 0 0.063em
}

<ul class="tree">
  <li>Root
    <input type="checkbox" checked/>
    <ul>
      <li class="lib">Sub1
        <input type="checkbox" checked/>
        <ul>
          <li class="itm">Item1
            <li class="itm">Item2
        </ul>
        </li>
        <li>Sub2
          <input type="checkbox" checked/>
          <ul>
            <li class="itm">Item1</li>
          </ul>
        </li>
        <li>Sub3
          <input type="checkbox" checked/>
          <ul>
            <li class="itm">Item1</li>
          </ul>
        </li>
    </ul>
    </li>
</ul>

编辑:最终结果应如下所示:

我已经尝试自己调整 CSS，但如果不弄乱折叠功能和/或列表层次结构，我无法正确调整。

我需要在 CSS 中更改什么才能正确布局列表项标签？这甚至可能，还是我需要某种能够定位标签的 HTML 元素？

Answer 1

从此更新你的CSS

ul.tree {
        padding: 0 0 0 30px;
    }

    li {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 16px 2px no-repeat;
        position: relative;
        list-style: none;
        padding-left:37px;
    }

        li.itm {
            margin-left: -1px !important;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEXDw8PWKQJEAAAAC0lEQVR4XmMgEQAAADAAAYFIpkQAAAAASUVORK5CYII=) 0 0 no-repeat;
            padding-left: 21px;
        }

        li input {
            position: absolute;
            left: 0;
            margin-left: 0;
            opacity: 0;
            z-index: 2;
            cursor: pointer;
            height: 1em;
            width: 1em;
            top: 0;
        }

            li input + ul {
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAGUlEQVR4XmMIDXVgAMMGCPZagWCDYGioAwCQxAgHBIBVQwAAAABJRU5ErkJggg==) 8px 0 no-repeat;
                margin: -0.938em 0 0 -44px;
                height: 1em;
            }

                li input + ul > li {
                    display: none;
                }

        li span {
            display: block;
            padding-left: 37px;
        }

        li input:checked + ul {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAgMAAACd/+6DAAAACVBMVEX///+AgIAAAAA8XrssAAAAFUlEQVR4XmMIDXVgQIZeK1D5oaEOAGzEBgf+DZdOAAAAAElFTkSuQmCC) 8px 6px no-repeat;
            margin: -1.25em 0 0 -44px;
            padding: 1.563em 0 0 50px;
            height: auto;
        }

            li input:checked + ul > li {
                display: block;
                margin: 0 0 0.125em;
            }

                li input:checked + ul > li:last-child {
                    margin: 0 0 0.063em;
                }