如何只顯示第一個與jQuery懸停？

如果我做一個徘徊在我的menulinks目前這是第一級別的所有submenues將顯示我不知道什麼是錯，看我的代碼：如何只顯示第一個與jQuery懸停？

$('#menu li').hover(function() { 
     //show its submenu 
     $('ul', this).slideDown(100); 

    }, function() { 
     //hide its submenu 
     $('ul', this).slideUp(100); 
    });

所以在我看來，必須很好地工作，因爲懸停在鏈接上應該只顯示第一個子菜單。但是，這個第一個鏈接的子菜單將直接顯示懸停，我不知道如何解決它比現在更好。

需要一些幫助。

爲了更好地理解，我創建了一個fiddle here。

來源

2013-05-08 JohnDoo

您在懸停功能中的選擇器正在查找所有ul元素，它們都是li元素的後代。你只想顯示直接的孩子。試試這個：

$('#menu li').hover(function() { 
    //show its submenu 
    $(this).children('ul').slideDown(100); 

}, function() { 
    //hide its submenu 
    $(this).children('ul').slideUp(100); 
});

來源

2013-05-08 13:00:42 cfs

<ul>它持有您的子菜單還包含子子菜單。因此，如果您顯示第一個列表，它會自動顯示該列表中包含的所有元素。

來源

2013-05-08 13:02:48 Vince

你應該爲不同級別的菜單使用不同級別的不同級別的子菜單來分開ul。

，如果你只想改變你的代碼，你可能會想嘗試這種變化：

//show its submenu 
$('ul', this).eq(0).slideDown(100);

來源

2013-05-08 13:05:53

您需要指定要顯示的列表。使用$(this)作爲上下文來查找內部的<ul>，然後使用:first僞選擇器篩選結果。

嘗試這樣兩個hoverIn和hoverOut事件：

$("#menu").on('hover', 'li', function(e){ 
    // $(this) refers to the <li> being hovered 
    $(this).find('ul:first').slideToggle(100); 
});

請參閱該文檔的on()和slideToggle()方法。

來源

2013-05-08 13:05:57

如何只顯示第一個與jQuery懸停？

回答

相關問題