Question

我正在尝试使用parent / child / grandchild / ...缩进创建一个可选列表。请参阅以下内容：

HTML code：

<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） - 并且我已经为这两个级别适当地定义了“margin-left”。

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

谢谢大家。

Answer 1

1-如果您想为每个级别制作自定义样式，那么＆＃34;＆gt;＆＃34;对你有好处，＆＃34;＆gt;＆＃34;只选择直接孩子。

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

#theParentList > li

第二级将是

#theParentList > li > ul > li

第三个：

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

等。

2-但是，如果你想让关卡向右移动一个级别并且你没有每个级别的独立风格，那么你可以应用这个css：

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

这将影响所有＆＃34; li＆＃34;儿孙... 因此，每一个李将从它的父母那里向右移动一点，并将所有它的孩子转移到它。

注意：如果你想让它从2级开始转移那么你可以把另一个＆＃34; li＆＃34;像这样：

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

缩进的JQuery可选列表 - 当预先知道缩进级别的数量时

1 个答案: