jquery 메뉴를 클릭에서 호버로 변경하십시오.

Question

.click을 사용하여 .hover로 변환하려는 사이트 중 하나에 메뉴가 있습니다. .click을 .hover로 변경했는데 호버로 작동했지만 추가하고 싶은 것은 멀리 이동할 때 메뉴를 취소하는 것입니다.

(function ($) { 
$(document).ready(function(){ 
    $("#block-menu-menu-tea-menu").hide(); 
    $("#block-menu-menu-teawares").hide(); 
    $("#block-menu-menu-teawares-china").hide(); 
    $("#block-menu-menu-japan-teawares").hide(); 
    $("#block-menu-menu-tea-countries").hide(); 
    $("#block-menu-menu-tea-blends").hide(); 
    $("#block-menu-menu-tea-types").hide(); 
    $("#main-menu .menu-1877 a").show(); 
    $("#main-menu .menu-1885 a").show(); 

    $('#main-menu .menu-2397 a').click(function() { //Tea by Country 
     $("#block-menu-menu-tea-countries").slideToggle(); 
     $("#block-menu-menu-teawares").hide(); 
     $("#block-menu-menu-tea-types").hide(); 
     $("#block-menu-menu-tea-blends").hide(); 
     $("#block-menu-menu-japan-teawares").hide(); 
     $("#block-menu-menu-teawares-china").hide(); 
     return false; 
    }); 

내가하고 싶은 것은 마우스 오버로 클릭을 변환 할 수 있습니다 :

이

는 원래 코드의 조각이다. 100 % 확실하지는 않습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

감사합니다.

Answer 1

jQuery의 사이트에서 가져온 호버 기능은 mouseenter와 mouseleave의 두 가지 콜백을 허용 할 수 있습니다. 요소를 숨길 수

$("li").hover(
    function() { 
    // do stuff when mouse is over the element 
    }, function() { 
    // do stuff when mouse is moved away from element 
    } 
); 

Answer 2

첫 번째 호출은 선택과 함께 시작 사용이

을 최소화 할 수 있습니다^당신의 방법 = Attribute starts with

$("[id^=block-menu-menu-]").hide(); 
$("#main-menu .menu-1877 a").show(); 
$("#main-menu .menu-1885 a").show(); 

다른 사람이 handlerOut의 콜백을 사용 말했듯

$('#main-menu .menu-2397 a').click(function() { //Tea by Country 
     $("#block-menu-menu-tea-countries").slideToggle(); 
     $("[id^=block-menu-menu-]").not("#block-menu-menu-tea-countries").hide(); 
     return false; 
    }, 
    function(){ 
    //Callback handler out 
    $("#block-menu-menu-tea-countries").slideToggle(); 
    } 
);