的JQuery了slideDown和效果基本show嵌套DIV標籤

Question

我工作的菜單系統，該系統具有兩個不同的組織結構適用於中：

A.懸停在一個標題，並擁有所有適用於該組了slideDown內容。

B.到僅適用於某些內容的一個以上的組類別懸停，並有此類別中了slideDown所有內容，無論他們是在哪個組。

第一部分是這樣的...實例...

http://jsfiddle.net/nWJhH/

第二部分是冒充一些問題...

http://jsfiddle.net/GBkMB/12/

我的意圖是將鼠標懸停在「早餐」上，即使它們處於不同的組中，也會讓「牛奶，蘋果和萵苣」滑落。然後，當你將鼠標移出「早餐」標題時，下面的所有內容都將滑入其原始組。但由於某種原因，我似乎無法得到slideDown應用。

任何想法？謝謝！！！！！！！！！！！！！！！！！

Answer 1

問題是你的項目（內容）的父項是隱藏的，所以項目滑動和所有，但因爲他們的父母是隱藏的，他們不會顯示。 :)

演示在這裏：http://jsfiddle.net/nheJ9/

它不是真正的整潔，我改變了一些類等，但多數民衆贊成，因爲我認爲這更有意義。

的一點是，你可以看到，當啓用父他們會表現出^。^

Answer 2

，如果你只想要的元素applicaple貓需要顯示這將這樣的伎倆，也去掉了重複代碼

$('.content').hide(); 
var $elms = $('.fruit, .vegetable, .dairy'); 
$elms.hover(function() { 
var $content = $(this).children('.content'); 
    $content.stop(1,1).slideToggle(600); 
}); 
var items=['breakfast','lunch','dinner']; 

$(items).each(function(){ 
    var sel=this; 
    $('#'+sel).hover(function() { 
     $('.'+sel).parent().slideDown(400); 
     $('.'+sel).siblings(':not(.'+sel+')').hide(); 
     $(this).addClass("black");}, 
    function(){ 
     $('.'+sel).parent().slideUp(400); 
     $('.'+sel).siblings(':not(.'+sel+')').show(); 
     $(this).removeClass("black") 
    }); 
}); 

如果你想整個含模塊項目則只是刪除的兄弟切換部分

http://jsfiddle.net/d4udts/GBkMB/29/