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

Question

我正在尝试制作一个带有 parent/child/grandchild/... 缩进的可选列表。请看下面：

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

HTML代码：

<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]

是否可以根据您拥有的 children 深度动态定义 CSS 样式？在上面的示例中，我只显示了 parent/child 级别（仅限级别 1 和级别 2）- 我已经为这两个级别适当地定义了 "margin-left"。

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

谢谢大家

Answer 1

1-如果你想给每个关卡都做自定义样式那么">"对你有好处，">"只选择直子。

所以你可以这样选择第一关：

#theParentList > li

第二层将是

#theParentList > li > ul > li

第三个：

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

等等

2-但是如果你想让关卡稍微向右移动一点并且你没有每个关卡的独立样式，那么你可以应用这个css:

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

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

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

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