mouseenter/떠나 및 마우스 오버/아웃 문제

Question

는 스크립트 :

$(".title").mouseenter(function() { 
    var which = $(this).index(); 
    $('.globalnav li').find('.dropdown').hide().eq(which).show(); 
}).mouseleave(function() { 
    var which = $(this).index(); 
    $('.globalnav li').find('.dropdown').hide().eq(which).hide(); 
}); 

탐색 :

는

<ul class="globalnav"> 
    <li> 
     <div class="title"><a href="#" target="_self">Home</a></div> 
     <div class="dropdown"> 
      <div class="navlinks"> 
       <div class="linkstitle">Title</div> 
       <div class="navlink"><a href="#" target="_self">Link1</a></div> 
       <div class="navlink"><a href="#" target="_self">Link1</a></div> 
      </div> 
     </div> 
    </li> 
... 

내가 의도 한대로 크롬에서 작동하지 않는 지금 사용하고 무엇을 위의 코드는 * 내가 필요 div를 보려면 내 클릭을 누르고 있어야합니다. 마우스 오버를 사용하면 IE 및 FF에서 제대로 작동하지 않습니다.

코딩 형식 자체 (클라이언트 코드)의 특성으로 인해 제목의 연관된 div (제목 호버에서 특정 div 표시)도 표시하는 데 문제가 있습니다. 제목 위에 마우스를 올려 놓으면 "navlinks"에 대한 첫 번째 내용이 표시됩니다.

Here's a fiddle to show you

감사 같은 다른 LI의 모습은 which 변수가 항상 0 될 것이며,이 권리를 대상으로하는 방법이 아니라면 왜의 .title 요소의 인덱스를 사용하는

Answer 1

.dropdown? 를 유혹하면서

하는 MouseLeave에게

<li> 
    <div class="title"> 
     <a href="#" target="_self">Home</a> 
     <div class="dropdown"> 
      <div class="navlinks"> 
       <div class="linkstitle">Title</div> 
       <div class="navlink"><a href="#" target="_self">Link1</a></div> 
       <div class="navlink"><a href="#" target="_self">Link1</a></div> 
      </div> 
     </div> 
    </div> 
</li> 

FIDDLE