화면 크기에 따라 자바 스크립트 사용 안함

Question

이 코드가 있는데 화면 크기가 766px으로 바뀌면이 코드를 비활성화하고 싶습니다.

누군가 나를 도울 수 있습니까?

$("#menu-main-menu #menu-item-28").hover(function() { 
    $('#menu-main-menu .sub-menu').css("display", "block"); 
    $("#menu-main-menu .sub-menu").hover(
     function() { 
      $('#menu-main-menu .sub-menu').css("display", "block"); 
     }, 
     function() { 
      $('#menu-main-menu .sub-menu').css("display", "none"); 
     }); 
    }, 
    function() { 
     $('#menu-main-menu .sub-menu').css("display", "none"); 
    } 
); 

이 항목을 발견 했으므로 스크립트를 사용하는 데 도움이 될 수 있지만 적용 방법을 모르겠습니다.

$(window).resize(function() { 
    if ($(this).width() > 766) { 
     //script here 
    } 
}); 

Answer 1

그런 다음 당신은 화면 크기를 변경 CSS를 사용하여 요소를 숨길 수 mediaquery를 참조하십시오. 이

@media only screen and (max-width: 766px) { 
    #menu-main-menu #menu-item-28, 
    #menu-main-menu .sub-menu { 
     display: none; 
    } 
} 

또는 사용할 수있는 스크립트와 같은 뭔가 당신이 전체 동작하는 예제가 아니라 당신이 논리를보고 내가 '하는 $("#menu-main-menu .sub-menu").hover(에 대한에도 때어 호버을 수정할 수 있습니다

function onHover() { 
    function() { 
     $('#menu-main-menu .sub-menu').css("display", "block"); 
     $("#menu-main-menu .sub-menu").hover(
     function() { 
      $('#menu-main-menu .sub-menu').css("display", "block"); 
      }, 
      function() { 
      $('#menu-main-menu .sub-menu').css("display", "none"); 
      }); 
    }, 
    function() { 
     $('#menu-main-menu .sub-menu').css("display", "none"); 
    } 
} 

var isLargeScreen = $(this).width() > 766; 
$(window).resize(function() { 

    var largeScreen = $(this).width() > 766; 
    if (!isLargeScreen && largeScreen) { 
     $("#menu-main-menu #menu-item-28").on('hover', onHover); 
    } else if (isLargeScreen && !largeScreen) { 
     $("#menu-main-menu #menu-item-28").off('hover', onHover); 
    } 
    isLargeScreen = largeScreen; 
}); 

발견 2 개의 함수를 넘겨서 올바르게 사용하고 있는지 잘 모르십니까?