Question

我一直在阅读许多使用addClass（），parent（），nearest（），filter（），CSS没有父选择器等方面做类似事情的帖子，我得到了无处不在，所以我非常感谢你的帮助。： - ）

一些背景：

我有一个由CMS生成的无序列表，因此我无法添加或更改其中的任何类。我只能触摸CSS，我可以使用jQuery。

当用户选择一个列表项时，CMS会向其中添加一个“已选择”类，也会向该li的父li，祖父母li等添加一个类，具体取决于所选菜单中的下降距离项目是。

我只能对主要导航和内部页面左侧显示的侧面导航使用这一个无序列表。

我需要做什么：

在sidenav中，我只需要显示其中包含选定li的ul，包括该父级中的所有li，而不仅仅是所选的li。例如，如果我的菜单有两个部分，关于我们和给予，有人从关于我们部分选择一个页面，我想只显示关于我们李而不是给予我们。（稍后我会将样式添加到顶级li和用户选择的页面的li。）

我理解如何显示具有所选类别的li，但如果ul在其中任何位置选择了li，我需要显示所有 li。此外，如果那些ul没有选择其中的li，我需要不在列表中显示任何其他ul。

这是我的HTML。在此示例中，用户已进入“关于我们 - >我们的承诺”下的“策略”页面。

<ul class="main-menu sm sm-simple">
    <li class="menuItem1 first parent selected"><a href="#">About Us</a>
        <ul class="nccUlMenuSub1">
            <li class="menuItem1 first parent selected"><a href="#">Our commitment</a>
                <ul class="nccUlMenuSub2">
                    <li class="menuItem1 first"><a href="#">Operating standards</a></li>
                    <li class="menuItem2 selected last"><a class="selected" href="#">Policies</a></li>
                </ul>
            </li>
            <li class="menuItem2 last"><a href="#">Annual Report</a></li>
        </ul>
    </li>
    <li class="menuItem2 last parent"><a href="#">Giving</a>
        <ul class="nccUlMenuSub1">
            <li class="menuItem1 first last"><a href="#">What your gift can do</a></li>
        </ul>
    </li>
</ul>

Answer 1

这应该有效：

$('li.selected').show();
$('li.selected').siblings('li:not(.parent)').show();

它将显示所选列表项的所有列表项。

此外，您有一些格式错误的HTML，所以我想知道它是否是拼写错误或CMS实际上是在输出无效的HTML：

<li class="menuItem2 last parent"><a href="#">Giving</a>  <!-- This -->
        <ul class="nccUlMenuSub1">

Fiddle

Answer 2

这可能更符合您的要求。

$('li.selected').find('.selected').show(); //get all grandchilden
$('li.selected').find('.selected').siblings().show(); // get all sibling except root

find忽略了根节点，因此'关于我们'兄弟'不会显示给予。此外，根据您的标记，您还有一个需要识别的子标记。

jsfiddle

如何仅显示其中包含所选<li>的<ul>，包括该父级ul中的所有</li> <li>，而不仅仅是所选的</li> </li>

一些背景：

我需要做什么：

2 个答案: