jQuery只在下拉菜單中選擇父李li

我想弄清楚如何讓這個淡入淡出效果只發生在我將鼠標懸停在父LI上時，但它似乎淡入淡出時，我將鼠標懸停在項目上下拉也是？jQuery只在下拉菜單中選擇父李li

任何想法???

我已經在這裏試過了一堆例子，但我似乎無法弄清楚這一點爲我的生活，它真的開始bug我！

感謝堆傢伙！

<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);

它只從.myMenu元素中選擇子元素<li>元素。

此外，有必要使用mouseenter和mouseleave事件，因爲存在奇怪的冒泡問題。

DEMO：http://jsfiddle.net/MdfHB/

參考文獻：

來源

2013-04-25 05:55:50 Ian

這似乎不工作？當我將鼠標懸停在子菜單中時，它仍然淡入淡出？ – user2218028 2013-04-25 06:12:06

@ user2218028對不起，將事件更改爲'mouseenter'和'mouseleave'。我一開始並沒有看到，但'mouseover'和'mouseleave'對後代有奇怪的影響 – Ian 2013-04-25 06:16:14

@ user2218028我用這些信息更新了我的答案，並添加了一個演示，其中包含我已經解釋過的所有更改，並且似乎工作 – Ian 2013-04-25 06:17:31

像這樣：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 2013-04-25 06:09:28

jQuery只在下拉菜單中選擇父李li

回答

相關問題