Question

我正在寻找让列表项具有交替背景颜色的方法。当存在嵌套列表时，项目保持交替但子项缩进而父流的背景颜色没有嵌套到其嵌套子项。 nested list example

无法申请课程。项目数量也是可变的。优选地，它应该适用于无限量的嵌套列表。但如果不可能，3个深度上限（如图所示）就足够了。如果使用div而不是li和ul更容易，那对我来说也是可能的。我更喜欢纯HTML / CSS。

因为我的所有实验都不好，所以我只能为JSFiddle提供嵌套列表。

<ul>
<li>Item 1
    <ul>
        <li>Item 1-1</li>
        <li>Item 1-2
            <ul>
                <li>Item 1-2-1</li>
                <li>Item 1-2-2</li>
            </ul>
        </li>
        <li>Item 1-3</li>
    </ul>
</li>
<li>Item 2
    <ul>
        <li>Item 2-1
            <ul>
                <li>Item 2-1-1</li>
            </ul>
        </li>
    </ul>    
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Answer 1

以下是一个可能的解决方案：https://jsfiddle.net/qmdwpzt8/3/

不确定是否符合您的所有要求，但我使用div更新了您的列表：

<ul>
    <li><div>Item 1</div>
        <ul>
            <li><div>Item 1-1</div></li>
            <li><div>Item 1-2</div>
                <ul>
                    <li><div>Item 1-2-1</div></li>
                    <li><div>Item 1-2-2</div></li>
                </ul>
            </li>
            <li><div>Item 1-3</div></li>
        </ul>
    </li>
    <li><div>Item 2</div>
        <ul>
            <li><div>Item 2-1</div>
                <ul>
                    <li><div>Item 2-1-1</div></li>
                </ul>
            </li>
        </ul>    
    </li>
    <li><div>Item 3</div></li>
    <li><div>Item 4</div></li>
</ul>

然后使用jQuery添加背景颜色：

$( document ).ready(function() {
    var b = true;
    $( "div" ).each(function( index ) {
        b = !b;
        if (b) {
            $(this).css("background-color", "#ff0000");
        } else {
            $(this).css("background-color", "#00ff00");
        }            
    });
});

这取决于jQuery / Javascript。

CSS嵌套列出项目和备用背景

1 个答案: