jQuery의 2 단계 메뉴

Question

현재 두 단계의 메뉴를 작업 중입니다. 여기 내 코드 - 메뉴 구조가 있습니다. 학부모 1에 마우스를 올리면 하단에 동일한 ID의 ul을 표시하려고합니다. jquery 코드를 만들었지 만 mouseleave에 문제가 있습니다.

HTML 구조

<section id="top-nav"> 
    <nav> 
     <ul> 
      <li data-href="menu-id-1"> 
       <a href="">Parent 1</a> 
      </li> 

      <li data-href="menu-id-2"> 
       <a href="">Parent 2</a> 
      </li> 

      <li data-href="menu-id-0"> 
       <a href="">Parent 3</a> 
      </li> 
     </ul> 
    </nav> 
</section> 

<section id="bottom-nav"> 
    <nav> 
     <ul class="child-ul" id="menu-id-1"> 
      <li> 
       <a href="#">Parent 1 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 1 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 1 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 1 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 1 Children li</a> 
      </li> 
     </ul> 

     <ul class="child-ul" id="menu-id-2"> 
      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 

      <li> 
       <a href="#">Parent 2 Children li</a> 
      </li> 
     </ul> 
    </nav> 
</section> 

jQuery를 (코드가 엉망이다, 그러나 나는 다른 방법을 시도)

$(function() { 
    $("#top-nav ul li").mouseover(function (e) { 
     e.preventDefault(); 
     data = $(this).attr("data-href"); 
     $("#" + data).css("display", "block").addClass('ul-active'); 
     $(this).children().addClass("active"); 
     active = true; 

    }).mouseleave(function() { 
     liactive = this; 

     $(".ul-active").mouseleave(function() { 
      $("#" + data).css("display", "none").removeClass('ul-active'); 
      $(liactive).children().removeClass("active"); 
     }); 
     $("#bottom-nav").not().mouseleave(function() { 
      $("#" + data).css("display", "none").removeClass('ul-active'); 
      $(liactive).children().removeClass("active"); 
     }); 
     if ($(liactive).attr("data-href") == 'menu-id-0') { 
      $(liactive).children().removeClass("active"); 
     } 
    }); 
}); 

나는 이것이 매우 간단 알고 있지만, 내가 올바른 방법을 찾을 수 없습니다 내가 좀 피곤해서 제대로 생각하지 않아.

Answer 1

메인 메뉴의 mouseover 처리기에서 이전에 표시된 보조 메뉴를 숨길 수 있습니다.
표시된 두 번째 메뉴를 숨기려면 $(document).on("mouseleave", ".ul-active"을 사용할 수 있습니다.

Fiddle.

$(function() 
{ 
    $("#top-nav ul li").mouseover(function() 
    { 
     hideSecondMenu(); 
     var data = $(this).attr("data-href"); 
     $("#" + data).addClass('ul-active'); 
     $(this).children().addClass("active"); 
     return false; 
    }); 

    $(document).on("mouseleave", ".ul-active", function() 
    { 
     hideSecondMenu(); 
    }); 

    function hideSecondMenu() 
    { 
     $(".ul-active").removeClass('ul-active'); 
     $("#top-nav ul li .active").removeClass("active"); 
    } 
}); 

CSS :

#top-nav ul li 
{ 
    display: inline 
} 

.child-ul 
{ 
    display: none; 
} 

.active 
{ 
    color: red; 
} 

.ul-active 
{ 
    display: block; 
} 

Answer 2

다음과 같이 사용할 수 있습니다. 나는 mouseleave를 separetely 사용할 필요가 없다. 아래 코드처럼 hover() 함수를 전달할 수있다. 호버 (기능 (e), 기능 (e)). 여기서 첫 번째는 호버를위한 것이고 두 번째는 쥐를위한 것입니다.

$(".yourselectorbyclass").hover(function(e) { 
    var timeout = $(this).data("timeout"); 
    e.stopPropagation(); 

    if(timeout) clearTimeout(timeout); 

    $(".yourselectortoshow").show(); 

//your code here 

}, function() { 
    $(this).data("timeout", setTimeout($.proxy(function(e) { 
    $(".yourselectortoshow").hide(); 
    //your code here 
    }, this), 100)); 
});