如何在jQuery中只顯示菜單的子菜單？

我有幾個類menu-item。當我將鼠標移到menu-item上時，子菜單始終顯示。但是，正如我們所見，sub-menu僅在id=menu-item-2292。如何在jQuery中只顯示菜單的子菜單？

<ul class="menu" id="menu-menu-principal"> 
    <li class="menu-item" id="menu-item-2289"><a href="/about">À propos</a></li> 
    <li class="menu-item" id="menu-item-2292"> 
     <a href="/photos">Photos</a> 
     <ul class="sub-menu"> 
     <li class="menu-item" id="menu-item-2296"><a href="/portrait">Portrait</a></li> 
     </ul> 
    </li> 
</ul>

我怎樣才能做到這顯示sub-menu只有menu-item有sub-menu？

來源

2011-03-24 Steffi

是它始終將是具有子菜單或可以在變化的同一菜單項。如果是的話，你如何生成列表？ – Belinda 2011-03-24 11:32:25

$('.menu-item').hover(function(){ 
    var submenu = $(this).find('.sub-menu'); 
    if (submenu.length != 0) { 
    submenu.show(); 
    } 
}, function(){ 
    $(this).find('.sub-menu').hide(); 
});

來源

2011-03-24 11:49:43

你是天才！這是完美的。謝謝Shree – Steffi 2011-03-24 11:53:21

哦，不，對不起，它不起作用。當我將鼠標移出'menu-item'時，子菜單消失... – Steffi 2011-03-24 12:00:34

不應該消失嗎？ – 2011-03-24 12:38:04

可以使用has()選擇減少選定的組li含ul

$(".menu-item").has('ul.sub-menu').hover(function() { 
    $('.sub-menu', this).show(); 
}, function() { 
    $('.sub-menu', this).hide(); 
});

來源

2011-03-24 11:36:40 felixsigl

是的，很好。但現在，問題是：當我試圖將鼠標懸停在「子菜單」上時，此人隱藏了......爲什麼？查看我的代碼：'$（「。menu-item」）。has（'ul.sub-menu'）。hover（ function（）{$（'。sub-menu'）。show（）;}， function（）{$（'。sub-menu'）。hide（）;} ）;' – Steffi 2011-03-24 11:44:56

請發佈您的CSS樣式。你還應該限制'show（）'和'hide（）'到'this'中的元素。我更新了我的帖子 – felixsigl 2011-03-24 11:52:09

如何在jQuery中只顯示菜單的子菜單？

回答

相關問題