javascript - 为 HTML 树添加折叠和展开 + 标记

Question

为HTML树添加折叠和展开+标记，

CSS3

.css-treeview input + label + ul
{
 margin: 0 0 0 22px;
}

.css-treeview input ~ ul
{
display: none;
}

.css-treeview label,
.css-treeview label::before
{
cursor: pointer;
}

.css-treeview input:disabled + label
{
cursor: default;
opacity: .6;
 }

 .css-treeview input:checked:not(:disabled) ~ ul
 {
  display: block;
 }

.css-treeview label,
.css-treeview a,
.css-treeview label::before
 {
 display: inline-block;
 height: 16px;
line-height: 16px;
vertical-align: middle;
}

.css-treeview label::before
{
 content: "";
 width: 10px;
 vertical-align: middle;
 background-position: 0 -32px;
}

.css-treeview input:checked + label::before
 {
  background-position: 0 -16px;
 }

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.css-treeview 
{
    -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
}

@-webkit-keyframes webkit-adjacent-element-selector-bugfix 
{
    from 
    { 
        padding: 0;
    } 
    to 
    { 
        padding: 0;
    }
  }
}

HTML

<div class="css-treeview">
<ul class="link1">     
    <li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">Category 1</label>
            <ul>
                <li><input type="checkbox" id="item-1-0" /><label for="item-1-0">Category 2</label>
                    <ul>
                        <li><input type="checkbox" id="item-2-2-2"  /><a href="./">Category3.1</a></li>
                        <li><input type="checkbox" id="item-2-2-2" /><a href="./">Category 3.2</a></li>
                        <li><input type="checkbox" id="item-2-2-2" /><a href="./">Category 3.3</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="item-2-2-2" /><a href="./">Category 2.1</a></li>
                <li><input type="checkbox" id="item-2-2-2" /><a href="./">Category 2.2</a></li>

在这棵树中有展开和折叠类别 1 和类别 2。当我单击复选框时，它展开和折叠。我想在那里添加到 + 和 - 标记。 因为 + 和 - 标记可以显示树是否可以扩展。 那我该怎么做呢？

类别 2.1 到 2.4 和 3.1 到 3.3 复选框应该出现。 我只需要用一些 + 和 - 标记更改类别 1 和类别 2 复选框。

demo here

Answer 1

您可以将 list-style-image 替换为 +/- 符号的图像，然后使用 jQuery 检查列表是否有任何子项并相应地更改 img src