使用 jquery 和modernizr 改变平板电脑方向答案

【问题标题】：tablet orientation change with jquery and modernizr使用 jquery 和modernizr 改变平板电脑方向
【发布时间】：2012-09-16 23:54:18
【问题描述】：

所以我有一个导航菜单，可以在纵向或横向查看平板电脑时改变样式。它将最后几个菜单项折叠到另一个下拉菜单中。然而，菜单不会在方向改变时更新，只有在刷新后才会更新。

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

有什么建议吗？？

【问题讨论】：

不客气。至于回答您的问题 - 我建议您附加一个 resize 事件侦听器并再次执行您的 Modernizr.mq。

标签： jquery media-queries modernizr

【解决方案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');

    }
});

【讨论】：