隱藏jQuery的列表

Question

我有一個嵌套列表作爲移動網站的導航工具。去年李的a。關閉鏈接應該關閉/隱藏列表#menu使用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的解決方案迄今：

$(document).ready(function() { 
    $("li a.close").click(function() { 
     $(this).parent().hide(); 
     return false; 
    }); 
}); 

問題：列表停留在狀態「隱藏」 - 這意味着嵌套的導航列表#menu不能再次打開。我如何添加一行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> 

而jQuery代碼：

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

這是因爲導航列表停留在鼠標懸停開放是移動瀏覽器是非常有用的。

Answer 1

<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> 

創建<a>和隱藏它，那麼當你點擊關閉父列表，顯示<a>。這<a>的onclick將重新開啓您的#menu並隱藏自身

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

Answer 2

試試這個：

// 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; 
}); 

DEMO HERE

Answer 3

謝謝您的幫助。你啓發了正確的解決方案：

<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> 

而jQuery代碼：

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