點擊展開菜單

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

<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的吮吸。我如何解決這個問題？

來源

2013-03-05 Simon Carlson

試試這個：HTTP： //api.jquery.com/slideToggle/ – 2013-03-05 14:23:44

首先，子菜單是一個類，而不是一個ID，所以你需要使用'.submenu'，你使用'＃子菜單' – dudledok 2013-03-05 14:27:08

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

JAVASCRIPT：

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

CSS：

.submenu{display:none;}

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

來源

2013-03-05 14:25:40 Dom

像魅力一樣工作，在幾分鐘內接受答案。謝謝！ – 2013-03-05 14:28:19

當然可以！需要幫助請叫我！ – Dom 2013-03-05 14:28:50

這是否適合您？

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

來源

2013-03-05 14:23:39 ant

改變'＃子菜單'爲'.submenu' – Dom 2013-03-05 14:25:50

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

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

來源

2013-03-05 14:26:09

子菜單應該是一個類而不是ID – Schoffelman 2013-03-05 14:28:08

@Schoffelman事實上，當我複製它時沒有注意到他的代碼 – 2013-03-05 14:31:48

你爲什麼不使用此代碼：

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

}); 

});

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

來源

2013-03-05 14:29:43 supersaiyan

點擊展開菜單

回答

相關問題