缩进 JQuery 可选列表 - 当事先不知道缩进级别数时

Indented JQuery Selectable List - when number of indentation levels are not known beforehand

本文关键字：缩进 不知道 JQuery 列表      更新时间：2023-09-26

>我正在尝试与父母/子/孙子/...缺口。请看下面：

http://jsfiddle.net/hphvpxuo/1/

网页代码： 

<li class="level-1">
    <div>Parent 1 - Lorem ipsum dolor sit amet</div>
    <ul class="level-2">
        <li>
            <div>Child 1.1 - consectetur adipiscing elit</div>
        </li>
        <li>
            <div>Child 1.2 - Integer nec odio</div>
        </li>
    </ul>
</li>

CSS代码：

.level-1 {
    margin-left: .25em;
    margin-bottom: 1px;
}
.level-2 {
    margin-left: 1em;
}

Javascript代码：

[请看jsfiddle]

是否可以根据孩子的深度动态定义CSS样式？在上面的例子中，我只显示了父/子级别（仅限级别 1 和级别 2）——我已经为这两个级别适当地定义了"左边距"。

但是，实际的级别数只能在运行时确定 - 例如，我可能需要 5 个级别的缩进（最多"level-5"）或更多。如果我不知道我需要多少缩进，是否可以动态定义缩进（无论是否通过 CSS）？

谢谢大家。

1-如果您想为每个级别制作自定义样式，那么">"对您有好处，">"仅选择直接子级。

所以你可以像这样选择第一级：

#theParentList > li

第二级将是

#theParentList > li > ul > li

第三：

#theParentList > li > ul > li > ul > li

等。。

2-但是，如果您想使级别向右移动一点，并且您没有每个级别的独立样式，那么您可以应用此css：

#theParentList li {
    margin-left: 2em; 
}

这将影响所有"李"子孙......因此，每个 li 都会从它的父级向右移动一点，并且会随之移动它的所有子级。

注意：如果你想让它从第 2 级开始转换，那么你可以像这样放另一个"li"：

#theParentList li li {
    margin-left: 2em; 
}
相关文章：