Question

我有一个<ul>列表嵌套在父隐藏的<ul>内，我想在其父级点击链接时显示它。同时我希望隐藏父<ul>内容（不隐藏孩子）。

我知道我可以通过两个单独的<ul id="main-list"> <li>ONE</li> <li>TWO</li> <li>THREE</li> <li>FOUR</li> <li>FIVE</li> <li><a href="#" id="open-submenu">SIX</a> <ul id="sub-nav"> <li>SIX - ONE</li> <li>SIX - TWO</li> <li>SIX - THREE</li> <li>SIX - FOUR</li> <li>RETRUN</li> </ul> </li> <li>SEVEN</li> <li>EIGHT</li> </ul>列表来解决这个问题，这些列表是非嵌套的，但我一直试图按照嵌套列表上的W3指南对它们进行嵌套。

我目前所遇到的问题是，当主要列表被隐藏时，它也隐藏了孩子并且不允许它被显示。

我在这里问了一个问题 - http://jsfiddle.net/xc0g770z/

HTML Im使用

$("#open-submenu").click(function () {
     $("#main-list").hide();
     $("#sub-nav").show();
});

使用的jQuery是

{{1}}

如何在仍然使用嵌套的情况下如何使其工作？

Answer 1

DEMO：http://jsfiddle.net/murid/xc0g770z/1/

$("#sub-nav").hide();
$("#open-submenu a").click(function () {
     $("#main-list li").hide();
     $("#open-submenu").show();
     $("#sub-nav").show();
     $("#sub-nav li").show();
});

Answer 2

执行此操作的一种方法是使用类

<ul>
<li class="main-list">ONE</li>
<li class="main-list">TWO</li>
<li class="main-list">THREE</li>
<li class="main-list">FOUR</li>
<li class="main-list">FIVE</li>
<li class="main-list" id="open-submenu">SIX<li></a>
<li class="six-sub">SIX - ONE</li>
<li class="six-sub">SIX - TWO</li>
<li class="six-sub">SIX - THREE</li>
<li class="six-sub">SIX - FOUR</li>
<li class="six-sub">RETRUN</li>
<li class="main-list">SEVEN</li>
<li class="main-list">EIGHT</li>
</ul>

在jquery中

$("#open-submenu").click(function () {
 $(".main-list").hide();
 $(".six-sub").show();  
});

使用jQuery隐藏父UL同时显示之前用css隐藏的嵌套子UL

2 个答案: