如何仅显示其中具有选定 <li> 的 <ul>，包括该父 ul 中的所有 <li>，而不仅仅是选定的？答案

【问题标题】：How to display only the <ul> that has a selected <li> in it, including all of the <li>s in that parent ul, not just the selected ones?如何仅显示其中具有选定 <li> 的 <ul>，包括该父 ul 中的所有 <li>，而不仅仅是选定的？
【发布时间】：2014-02-28 13:26:07
【问题描述】：

我一直在阅读许多使用 addClass()、parent()、closest()、filter() 做类似事情的帖子，CSS 没有父选择器等，我得到了无处可去，所以我非常感谢您的帮助。 :-)

一些背景：

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

当用户选择一个列表项时，CMS 会向它添加一个“已选择”类，并且还会添加到该 li 的父 li、祖父 li 等树上，具体取决于所选菜单在菜单中的位置项目是。

我只能将这个无序列表用于主导航和显示在内部页面左侧的侧导航。

我需要做什么：

在 sidenav 中，我只需要显示其中包含选定 li 的 ul，包括该父 ul 中的所有 li，而不仅仅是选定的 li。例如，如果我的菜单有两个部分，About Us 和 Giving，并且有人从 About Us 部分中选择了一个页面，我只想显示 About Us 而不是 Giving。（稍后我会在顶层 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>

【问题讨论】：

这听起来更像是一个 CMS 问题

标签： javascript jquery css

【解决方案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

【讨论】：

谢谢，我试试看！我认为 HTML 没问题； li 没有关闭，因为它下面有子菜单（如果我理解你的意思）。
这就是我最终使用的。 .siblings() 是关键！再次感谢。 $('#leftnav ul.main-menu li').hide();$('#leftnav ul.main-menu li.selected').show();$('#leftnav ul.main-menuli.selected').siblings('li:not(.parent)').show();

【解决方案2】：

这可能是您正在寻找的更多内容。

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

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

jsfiddle

【讨论】：

谢谢，我看看怎么样！