jQuery顯示子菜單，如果父母被點擊

Question

有人可以幫助代碼。

我想僅在子菜單父母被點擊時才顯示子菜單。

HTML

<ul> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a> 
    <ul class="sub-menu"> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
    </ul> 
</li> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a> 
    <ul class="sub-menu"> 
     <li><a href="#">Submenu</a></li> 
     <li><a href="#">Submenu</a></li> 
    </ul> 
</li> 
<li><a href="#">Item</a></li> 
</ul> 

所以，如果你點擊父子菜單會顯示。

這裏是小提琴鏈接 - http://jsfiddle.net/KhNCV/1/

Answer 1

$('.sub-menu').hide(); 

$("li:has(ul)").click(function(){ 

$("ul",this).slideDown(); 
}); 

http://jsfiddle.net/3nigma/KhNCV/2/

OR

$('.sub-menu').hide(); 

$("li:has(ul)").click(function(){ 

$("ul",this).toggle('slow'); 
}); 

http://jsfiddle.net/3nigma/KhNCV/4/

Answer 2

這裏的your example working。目前尚不清楚爲什麼您需要a標籤，因爲您可以在CSS中使用光標：指針來使li顯示爲可點擊。我會假設你想要在IE瀏覽器上做一些漂亮的懸停在CSS上？如果不是，可以通過刪除它們來簡化。

而不是在.submenu上做hide（），你應該使用CSS（用DOM解析而不是onReady/load）。

.sub-menu { display: none; } 

然後這裏是你的代碼來切換菜單：

$('ul li a').click(function() { 
    $(this).parent().find('ul.sub-menu').toggle(); 
    return false; 
}); 

Answer 3

$('li a').click(
function() { 
    $(this).next().slideToggle(); 
}) 

Answer 4

試試這個

$(function(){ 

    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle(); 
    }); 
}); 

Answer 5

$('.sub-menu').hide(); 

$("a").click(function(){ 

    $(this).parent().children("ul").toggle(); 

}) 

退房此鏈接 http://jsfiddle.net/KhNCV/6/