jquery와 modernizr을 사용한 태블릿 방향 변경

Question

그래서 세로 또는 가로 방향으로 태블릿을 볼 때 스타일을 변경하는 탐색 메뉴가 있습니다. 마지막 몇 개의 메뉴 항목을 다른 드롭 다운 메뉴로 축소합니다. 그러나 방향 변경시 메뉴가 업데이트되지 않고 새로 고침 후에 만 ​​업데이트됩니다.

JQuery와 모더 나이저 코드 :

if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){ 
    // portrait stuff 
     // unhides last few menu items 
     $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); 

     // remove hide and first child class originally assigned to it from it's ul parent 
     // then add the more list item to the end of the nav menu 
     $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items'); 

     // grab the last two items of the nav menu and insert into the more list item menu 
     $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu'); 
    } 

어떤 제안이?

Answer 1

그래서 크기 조정 리스너에 함수를 배치하면 효과가 있습니다! 또한 else 문이있을 때 더 잘 작동하는 것으로 보입니다. 다른 장치에서 추가 테스트를 수행하면됩니다.

업데이트 코드 :

$(window).bind('resize', function(){ 

    if(Modernizr.mq('(max-device-width: 800px) and (orientation: portrait)')){ 
    // portrait stuff 
     // unhides last few menu items 
     $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); 

     // remove hide and first child class originally assigned to it from it's ul parent 
     // then add the more list item to the end of the nav menu 
     $('.moreItem').removeClass('hide first-child').appendTo('#menu-primary-items'); 

     // grab the last two items of the nav menu and insert into the more list item menu 
     $('.topNavigation .toplevel').slice(-2).appendTo('.moreMenu'); 
    } else if(Modernizr.mq('(max-device-width: 1280px) and (max-device-height: 800px) and (orientation: landscape)') || Modernizr.mq('(max-device-width: 1024px) and (orientation: landscape)')){ 

     $('.moreMenu').children().appendTo('#menu-primary-items'); 

     $('.moreItem').addClass('hide first-child').appendTo('.moreItemHolder'); 

     $('#menu-primary-items > li:nth-last-child(-n+3)').css('display', 'block'); 

    } 
});