jQuery выберите только родительский ли в выпадающем меню

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

Любые идеи ???

Я пробовал здесь кучу примеров, но я не могу понять, что это за жизнь меня, и это действительно начинает меня бить!

Спасибо, куча ребята!

<style type="text/css"> 

/*style the main menu*/ 
.myMenu { 
    margin:0; 
    padding:0; 
} 

.myMenu li { 
    list-style:none; 
    float:left; 
    font:12px Arial, Helvetica, sans-serif #111; 
} 

.myMenu li a:link { 
    display:block; 
    text-decoration:none; 
    background-color:#09F; 
    padding: 0.5em 2em; 
    margin:0; 
    border-right: 1px solid #fff; 
    color:#111; 
} 

.myMenu li a:hover { 
    background-color:#0CF; 
} 

/*style the sub menu*/ 
.myMenu li ul { 
    position:absolute; 
    display: none; 
    border-top:1px solid #fff; 
    margin:0; 
    padding:0; 
} 

.myMenu li ul li { 
    display:inline; 
    float:none; 
} 

.myMenu li ul li a:link, .myMenu li ul li a:visited { 
    background-color:#09F; 
    width:auto; 
} 

.myMenu li ul li a:hover { 
    background-color:#0CF; 
} 

</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $('.myMenu li').on('mouseover', openSubMenu); 
     $('.myMenu li').on('mouseout', closeSubMenu); 

     function openSubMenu() { 
      $(this).find('ul').fadeIn() 
     }; 

     function closeSubMenu() { 
      $(this).find('ul').fadeOut(); 
     }; 

}); 
</script> 

</head> 

<body> 
<ul class="myMenu"> 
    <li><a href="#">menu item 1</a></li> 
    <li><a href="#">menu item 2</a> 
     <ul> 
      <li><a href="#">sub menu item 1</a></li> 
      <li><a href="#">sub menu item 2</a></li> 
      <li><a href="#">sub menu item 3</a></li> 
      <li><a href="#">sub menu item 4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">menu item 3</a> 
     <ul> 
      <li><a href="#">sub menu item 1</a></li> 
      <li><a href="#">sub menu item 2</a></li> 
      <li><a href="#">sub menu item 3</a></li> 
      <li><a href="#">sub menu item 4</a></li> 
     </ul> 
    </li> 
    <li><a href="#">menu item 4</a></li> 
    <li><a href="#">menu item 5</a></li> 
</ul> 

</body> 
</html>

источник

2013-04-25 user2218028

Используйте этот селектор:

$('.myMenu > li').on('mouseover', openSubMenu);

вместо:

$('.myMenu li').on('mouseover', openSubMenu);

(очевидно, относятся к одной и той же селектор в других местах)

Хотя, я хотел бы использовать :

$('.myMenu').children('li').on('mouseover', openSubMenu);

Он выбирает только детей <li> элементов из элемента .myMenu.

Кроме того, необходимо использовать события mouseenter и mouseleave из-за странных проблем с пузырьками.

ДЕМОНСТРАЦИОННЫЕ:http://jsfiddle.net/MdfHB/

Литература:

источник

2013-04-25 05:55:50 Ian

Это похоже не работает? Когда я нахожу LI в подменю, он все еще исчезает и исчезает? – user2218028

@ user2218028 Извините, измените события на 'mouseenter' и' mouseleave'. Я не видел этого сначала, но «mouseover» и «mouseleave» имеют странные эффекты для потомков. – Ian

@ user2218028. Я обновил свой ответ с помощью этой информации и добавил демо со всеми изменениями, которые я объяснил, и, похоже, работа – Ian

Как это: http://jsfiddle.net/dtbaf/1/

$('.myMenu > li').on('mouseenter', openSubMenu); 
    $('.myMenu > li').on('mouseleave', closeSubMenu);

Что выбирает только непосредственные дочерние li х myMenu класса. Также используются .mouseenter() и .mouseleave() события ..

источник

2013-04-25 05:56:33 Anujith

Это не работает, я уже пробовал, подменю затухают и выходят, когда вы идете между ними. – user2218028

jQuery выберите только родительский ли в выпадающем меню

ответ

Смежные вопросы