點擊展開菜單

Question

我有一個基本的菜單，看起來像這樣。

<ul id="menu"> 
<li id="auctions">Auctions</li> 
<li class="submenu">Submenu 1</li> 
<li class="submenu">Submenu 2</li> 
<li class="submenu">Submenu 3</li> 
</ul> 

我想三個子菜單被隱藏，直到文本「拍賣」被點擊。然後他們應該出現，並在第二次點擊「拍賣」時再次隱藏，等等。我曾嘗試過這樣的事情。

$(function() { 
    $('#auctions').click(function() {   
     $('#menu').animate({'height': '200'}); 
     $('#submenu').animate({opacity : 'toggle'}); 
    }, function() { 
     $('#menu').stop().animate({'height': '100'}); 
     $('#submenu').animate({opacity : 'toggle'}); 
    }); 
}); 

說實話我在jQuery的吮吸。我如何解決這個問題？

Answer 1

使用jQuery's .slideToggle()，也確保.submenu是不可見的：

JAVASCRIPT：

$(function() { 
    $('#auctions').click(function(){ 
     $('.submenu').slideToggle(); 
    }); 
}); 

CSS：

.submenu{display:none;} 

DEMO：http://jsfiddle.net/dirtyd77/SLGdE/4/

Answer 2

這是否適合您？

$('#auctions').click(function(){ 
    $("#menu, .submenu").toggle(); 
}); 

Answer 3

您的基本結構很好，但我不會使用css()。在代替使用slideToggle()：

$(function() { 
    $('#auctions').click(function() {   
     $('.submenu').slideToggle(); 
    }); 
}); 

Answer 4

你爲什麼不使用此代碼：

$(function() { 
$('.submenu').hide(); 
    $('#auctions').click(function() {   
     //$('#menu').animate({'height': '200'}); 
     $('.submenu').toggle("slow"); 

}); 

}); 

除了您使用"#submenu"並在你的HTML其class你應該使用".submenu"