반응 형 Jquery 메뉴 - 화면이 증가하면 작동하지만 줄이면 표시되지 않습니다.

Question

반응 형 메뉴에 문제가 있습니다. 브라우저 크기가 800 픽셀 이상이면 하위 메뉴가 열리는 일반적인 드롭 다운 메뉴입니다. 호버, 크기가 800px 미만일 때 (휴대 전화의 경우)를 클릭하면 하위 메뉴가 열립니다.

문제는 내가 100 % 줌으로 페이지를 열 때 (호버링) 잘 작동하지만, 확대하면 (800 픽셀 미만) 효과가 두 배로 증가합니다. 마우스를 올리면 작동하고 클릭해도됩니다. 마우스 오버 효과를 "끄고"클릭 만하는 방법. 는 희망이 코드는 모든 것을 설명 :

function checkResize() { 
    var ww = $(window).width(); 
    if (ww < 800) { 
     $('#main-menu-list li').on('click', function() { 
      if ($(this).length>0) { 
       $(this).children('ul').toggle(); 
      } 
     }); 
    } else { 
     $('#main-menu-list li').hover(function() { 
       $(this).children('ul').fadeIn(); 
      }, 
      function() { 
       $(this).children('ul').fadeOut(200); 
      } 
     ); 
    }; 
}; 

Answer 1

이 checkResize 방법은 여러 번 호출 가정하면, 당신은 새로운 것을 추가하기 전에 이벤트 리스너를 제거해야합니다. 예를 들어 모든 click, mouseenter (에서 가져) 및 mouseleave (밖으로 가져가) 리스너를 제거 :

function checkResize() { 
    $('#main-menu-list li').off('click mouseenter mouseleave'); 
    ... 

이 클릭하거나 동작을 가져 중 하나에 당신을 떠나야한다.