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

Answer 2

我建议使用插件treeview.js，外观和感觉也更好 Bootstrap treeview

（或）

如果您想使用自定义图像和Pure css3，请转到此链接

Easy CSS3 Checkboxes and Radio Buttons

添加折叠并将+标记展开到HTML树

2 个答案: