중첩 된 ul에 대한 jQuery mouseleave

Question

중첩 된 ul을 포함하는 간단한 드롭 다운을 구성하고 있습니다. 최상위 레벨 li 위로 마우스를 가져 가면 보이는 상태로 애니메이트되기를 원합니다. 그리고 마우스가 전체 탐색 영역을 떠날 때 숨겨진 상태로 애니메이션을 적용합니다.

가시 상태로 애니메이션을하면 잘 작동합니다. 내 문제는 숨어있는 부분입니다. 마우스가 최상위 레벨을 떠날 때마다 마우스를 끈다. 나는 그 mouseleave가 잘못 생각하지 않는 한 자식 요소에 대해 그렇게해서는 안된다.

다음은 코드입니다. 어떤 도움이나 통찰력도 환영합니다.

$(document).ready(function() { 

     //When mouse rolls over 
     $('#mainNavBar li').mouseenter(function(){ 
      $('.menuDrop').stop().animate({height:'163px'},{ queue:false, duration:300, easing: 'easeInQuart'}) 
     }); 

     //When mouse is removed 
     $('#mainNavBar li').mouseleave(function(){ 
      $('.menuDrop').stop().animate({height:'0px'},{ queue:false, duration:300, easing: 'easeOutQuart'}) 
     }); 

    }); 

그리고 HTML

<ul id="mainNavBar"> 
       <li id="pos1"><a href="#"><span class="accesslinks">TOP 1</span></a> 
        <div class="menuDrop"> 
         <ul class="products"> 
          <li class="active">Product 1</li> 
          <li>Product 2</li> 
          <li>Product 3</li> 
          <li>Product 4</li> 
         </ul> 
         <ul class="tabs"> 
          <li class="selected"><a href="#">Tab 1</a></li> 
          <li><a href="#">Tab 2</a></li> 
          <li><a href="#">Tab 3</a></li> 
          <li><a href="#">Tab 4</a></li> 
         </ul> 
        </div> 
       </li> 
       <li id="pos2"><a href="#"><span class="accesslinks">TOP 2</span></a> 
        <div class="menuDrop"> 
         <ul class="products"> 
          <li class="active">Product 5</li> 
          <li>Product 6</li> 
          <li>Product 7</li> 
          <li>product 8</li> 
         </ul> 
         <ul class="tabs"> 
          <li class="selected"><a href="#">Tab 1</a></li> 
          <li><a href="#">Tab 2</a></li> 
          <li><a href="#">Tab 3</a></li> 
          <li><a href="#">Tab 4</a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 

Answer 1

문제는 그 #mainNavBar li 일치하는 수준에서 #mainNavBar 내의 모든 li 요소. 즉, 내부 요소 인 li과도 일치합니다. 직접적인 아이들에게만 일어나기를 원하면 선택자를 #mainNavBar > li으로 변경하십시오.

또한, 나는 그렇지 않으면 당신은 모든 .menuDrop 요소와 li 공중 선회 내 장치뿐 아니라 영향을 미칠 것입니다, 당신은 아마 대신 $('.menuDrop')의 $(this).find('.menuDrop')을 원하는 생각하고 있어요.

호버를 사용하여 코드를 단순화 할 수도 있습니다.

http://api.jquery.com/hover/