mouseout에서 mouseout이 실행되는 것처럼 보입니다.

Question

하위 메뉴가있는 큰 드롭 다운 메뉴가있는 탐색 메뉴입니다. 드롭 다운은 메인 nav li을 클릭했을 때만 나타나야하고 li 및/또는 .subNav div를 li 안에 남겨두면 숨 깁니다. 그것은 꼭 클릭하면 보여 지지만 .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'); 
});