平板電腦的方向隨着jquery和modernizr的變化

Question

所以我有一個導航菜單，它在縱向或橫向查看平板電腦時會改變樣式。它將最後幾個菜單項摺疊到另一個下拉菜單中。然而，菜單不會在更改方向時更新，只有刷新後纔會更新。

Jquery的Modernizr的代碼：

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'); 

    } 
});