jQuery下拉菜單也顯示孩子的孩子

我在WordPress中有這個jQuery下拉菜單，我有一個父菜單選項卡，然後是一個子菜單選項卡，然後是一個子菜單選項卡。jQuery下拉菜單也顯示孩子的孩子

當我懸停我的父母選項卡時，我的（第一個）子選項卡出現，但第二個子選項卡也出現。

這是我的jQuery代碼。我認爲問題在於，在第一個函數中，「ul.sub-menu」得到了slideToggle，但是他也爲另一個「ul-sub_menu」做了這個。所以我認爲我需要指定他只需要第一個ul子菜單而不是「更深」的菜單。但我不知道該怎麼做？那麼有人可以幫助我嗎？

我給這個一的jsfiddle：http://jsfiddle.net/6jKn7/

$(document).ready(function(e) { 
    $("#header_inner .menu-header-container ul li").hover(function() { 
     $(this).find("a").toggleClass('hover'); 
     $("ul.sub-menu", this).slideToggle(50); 
    }); 

    $("#header_inner .menu-header-container ul li ul li").hover(function() { 
     $("ul.sub-menu", this).slideToggle(50); 
    }); 
});

來源

2013-12-23 Robbert

你可以嘗試顯示/隱藏當前元素和它的兄弟姐妹的後代。

代碼：

$(document).ready(function (e) { 
    $("#header_inner .menu-header-container ul li").hover(function() { 
     $(this).find("a").toggleClass('hover'); 
     $(this).siblings().children(".sub-menu").hide(); 
     $(this).children(".sub-menu").slideToggle(50);   
    }); 
});

演示：http://jsfiddle.net/b64sK/

來源

2013-12-23 13:42:59

的問題是，

$("ul.sub-menu", this)

就拿應用切換以這一切ul.sub菜單，任何水平。
如果您只想將它應用到第一個匹配項，您可以在選擇器之後添加.first。

$(document).ready(function (e) { 
    $("#header_inner .menu-header-container ul li").hover(function() { 
     $(this).find("a").toggleClass('hover'); 
     $("ul.sub-menu", this).first().slideToggle(50); //here 
    }); 

    $("#header_inner .menu-header-container ul li ul li").hover(function() { 
     $("ul.sub-menu", this).slideToggle(50); 
    }); 
});

這將解決問題，但我認爲最好的解決方案是爲每個級別的子菜單創建不同的類。
總的來說，我肯定會用純CSS而不是用jQuery來做到這一點，因爲表演會更好。

來源

2013-12-23 13:43:08 pasine

我曾嘗試。首先（早期），但沒有給出正確的結果。但是，如何用CSS解決它呢？ – Robbert

嘗試谷歌「純CSS的下拉菜單」，你會發現像這樣的例子噸http://wise25.com/tutorials/how-to-create-a-pure-css-dropdown-menu – pasine

你應該玩懸停僞選擇。 – pasine

你應該使用不同的類嵌套ul。使用$("ul.sub-menu")也會影響子內容子菜單。

Working Fiddle

來源

2013-12-23 13:43:11