Question

是否可以将嵌套的ul＆gt; li设置为像这个插件一样的树视图？ http://www.easyjstree.com/

我最初使用的是这个插件，但我遇到的情况是我无法使用JavaScript / jQuery，但必须在CSS中完成。这甚至可以用于以下HTML吗？

<div id="navigator">
    <ul>
        <li class="isFolder isExpanded">
           XYZ CORP HR TIME SELF SERVICE    
            <ul>
                <li class="isFolder isExpanded">
                    Time
                        <ul>
                            <li><a href="#" target="_tab">Create Timecard</a></li>
                            <li><a href="#" target="_tab">Recent Timecards</a></li>
                            <li><a href="#" target="_tab">Templates</a></li>
                            <li><a href="#" target="_tab">Timecard Search</a></li>                                   
                        </ul>
                </li>
            </ul>        
        </li>
        <li class="isFolder isExpanded">
            XYZ CORP EXP ENTRY
            <ul>
                <li><a href="#" target="_tab">Expense Home</a></li>      
            </ul>
        </li> 
        <li class="isFolder isExpanded">
            XYZ HR EMP SELF SERVICE
            <ul>
                <li><a href="#" target="_tab">Accommodation Request</a></li>
                <li><a href="#" target="_tab">Additional Personal Information</a></li>
                <li><a href="#" target="_tab">All Actions Awaiting Your Attention</a></li>
                <li><a href="#" target="_tab">Appraisals</a></li>
            </ul>
        </li>
    </ul>
</div>

非常感谢任何帮助或指导!!

Answer 1

由于+选择器，没有动画也不难做到。不幸的是，需要在复选框上使用id才能使标签生效。父选择器何时。

如果您希望稍后制作动画，则可以通过max-height:0;而不是display:none;进行隐藏，并为max-height设置动画。在下行方面，它会强加max-height。如果你想假装那个动画，请坚持使用display:none;并设置垂直填充动画，让用户的眼睛完成工作。 Ÿ＆＃39;知道了。标准动画技巧。

＆＃13;

ul.asTree {
    list-style-type:none;
    padding:0;
    margin:0;
    text-indent:1em;
}
ul.asTree ul{
    display:none;
    list-style-type:none;
}

ul.asTree li{/*lets us position the label's ::before*/
    position:relative;
}

ul.asTree label{
    cursor:pointer;
}
ul.asTree label:hover{
    box-shadow: 0 0 5px 0 rgba(128,155,200,0.5) inset;
}
ul.asTree label::before{
    content:"\25B7";
    position:absolute;
    left:-1em;
    top:-2px;
}
ul.asTree input:checked + label::before{
    content:"\25E2";
}

ul.asTree input:checked + label + ul{
    display:block;
}

＆＃13;

<ul class="asTree">
    <li>item 1</li>
    <li>item 2</li>
    <li>
        <input type="checkbox" hidden id="treeExp_3" />
        <label for="treeExp_3">item 3</label>
        <ul>
            <li>item 3.1</li>
            <li>
                <input type="checkbox" hidden id="treeExp_3_2" />
                <label for="treeExp_3_2">item 3.2</label>
                <ul>
                    <li>item 3.2.1</li>
                    <li>item 3.2.2</li>
                </ul>
            </li>
            <li>item 3.3</li>
        </ul>
    </li>
    <li>
        <input type="checkbox" hidden id="treeExp_4" />
        <label for="treeExp_4">item 4</label>
        <ul>
            <li>item 4.1</li>
            <li>item 4.2</li>
        </ul>
    </li>
</ul>

＆＃13;

在Dabblet

上交替使用

嵌套无序列表到treeview？

1 个答案: