根据是否选择了父项显示或隐藏导航子项

Question

我正在Angular中动态地创建一个菜单（尽管我认为这个问题对生成代码的框架是不可知的），并且我有一个UL，其中包含一个LIs，每个LIs包含一个链接，如下所示：

<ul>
    <li>
        <a href="">The Parent Link</a>
    </li>
</ul>

代码迭代LIs，为每个项目生成一个链接。某些项的子项呈现如下所示：

<ul>
    <li>
        <a href="whatever">The Parent Link</a>
        <ul>
            <li>
                <a href="whatever">The Child link</a>
            </li>
        </ul>
    </li>
</ul>

有没有一种方法可以在默认情况下隐藏孩子（我已经成功地用display：none--我知道，我应该得到一个奖章），但是当父LI（注意--不是父锚链接）有一个类，例如active时，他们会出现？

所以，基本上是这样的：

<ul>
    <li class="active"> *<-- I've clicked on this so it's got the class 'active'*
        <a href="">The Parent Link</a>
        <ul>
            <li>
                <a href="The Child link</a> *<--  I am now visible* 
            </li>
        </ul>
    </li>
</ul>

Answer 1

是的，它可能与CSS：

li ul {
    display: none;
}

li.active ul {
    display: block;
}