使用jquery隐藏列表

我有一个嵌套列表作为移动网站的导航工具。最后一个li中的a.close链接应使用jquery关闭/隐藏列表菜单：

<ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>  

问题：列表处于“隐藏”状态-这意味着嵌套导航列表菜单无法再次打开。如何添加一行jquery以返回默认状态

谢谢你的帮助

---

谢谢你的帮助！您提出了正确的解决方案：

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

这对于移动浏览器非常有用，因为导航列表在鼠标上方保持打开状态。

试试以下方法：

 <ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<a class="openul" href="#" style="display:none">Open parent list</a>

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>

// Hide the Close li on page load
$("li a.open").parent().hide();

// On click of close, hide the close li and open the show li
$("li a.close").click(function () {
    $(this).parent().hide();
    $(this).parent().next().show();
    return false;
});

// On click of open, hide the show li and open the close li
$("li a.open").click(function () {
   $(this).parent().hide();
    $(this).parent().prev().show();
    return false;
});

---

谢谢你的帮助。您提出了正确的解决方案：

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

---

为什么你不把隐藏链接放在菜单容器外呢？对不起，我编辑后忘了更新：D，现在正在工作：D$（文档）。准备（函数（）{$（“LIA.close”）。点击（函数（）{$（“#菜单”）.children（）.hide（）；return false；}；$（.openul”）。鼠标悬停（函数（）{$（“#菜单”）.children（）.show（）；}）；

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});