Как показать только первый с помощью jQuery?

Question

если я сделать парить над моим ссылок меню в настоящее время все submenues, которые находятся на первом уровне будет показано я не знаю, что случилось, увидеть мой код:

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

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

так на мой взгляд, он должен работать очень хорошо, потому что зависание по ссылке должно отображать только это первое подменю. Но также подменю этой первой ссылки будет отображаться непосредственно с помощью наведения, и я не знаю, как исправить это лучше, чем пока.

нужна помощь пожалуйста.

Для лучшего понимания i hve создал fiddle here.

Answer 1

Ваш селектор в ваших функциях зависания находит все элементы ul, которые являются потомками элемента li. Вы хотите показать только прямых детей. Попробуйте вместо этого:

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

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

Answer 2

<ul>, который держит ваш подменю также содержит подменю подменю. Поэтому, если вы показываете первый список, он автоматически также отображает все элементы, содержащиеся в этом списке.

Answer 3

Вы должны разделить ul для разных уровней подменю, используя разные классы для разных уровней меню.

если вы хотите просто изменить свой код, который вы можете попробовать это изменение:

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

Answer 4

Вы должны указать список, который вы хотите показать. Используйте $(this) как контекст, чтобы найти <ul> внутри, а затем отфильтруйте результат с помощью псевдоселектора :first.

Try что-то подобное для обоих hoverIn и hoverOut событий:

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

Смотрите документацию для on() и slideToggle() методов.