鼠标出现在鼠标中心上时正在触发

Question

这是一个包含子页面的大下拉菜单。只有在点击主导航列表时才会出现下拉菜单，然后在离开里边的li和/或.subNav div时隐藏下拉菜单。它会在点击时显示，但是一旦我尝试输入.subNav div，整个下拉菜单就会再次隐藏（“点击”类将被删除）。

这里有一个导航里的HTML和.subNav下拉：

<li><a class="more">MORE</a> 
    <div class="subNav more"> 

     <div class="subNavGroup"> 
      <h4>Sub Group 1</h4> 
      <ul> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
      </ul> 
     </div><!-- .subNavGroup --> 

     <div class="subNavGroup"> 
      <h4>Sub Group 2</h4> 
      <ul> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
       <li><a href="#">This Thing vs That There</a></li> 
      </ul> 
     </div><!-- .subNavGroup --> 

     <div class="subNavGroup"> 
      <h4>Sub Group 3</h4> 
      <ul> 
       <li><a href="#">This Thing vs That There</a></li> 
      </ul> 
     </div><!-- .subNavGroup --> 


    </div><!-- .subNav --> 
</li> 

下面是增加了“点击”类上点击李jQuery的，并且应该不会删除它，直到mouseout，但它是在mouseenter上完成的。

// make the drop down menus appear on click and dissapear on mouse out 
$('.mainNav2 li').live('click', function() { 
    $(this).addClass('clicked'); 
}); 

$('li.clicked').live('mouseout', function(){ 
    $('li.clicked').removeClass('clicked'); 
}); 

Answer 1

这固定了它。不知道为什么原来没有工作（可能是事件冒泡或什么的）。

// make the drop down menus appear on click and dissapear on mouse out 
$('.mainNav2 li').live('click', function() { 
    $(this).addClass('clicked'); 
}); 

$('.mainNav2 > li').mouseleave(function(){ 
    $('li.clicked').removeClass('clicked'); 
});