4

そのため、タブレットを縦向きまたは横向きに表示するとスタイルが変わるナビゲーション メニューがあります。最後のいくつかのメニュー項目を別のドロップダウン メニューに折りたたみます。ただし、向きが変わってもメニューは更新されず、更新後にのみ更新されます。

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

助言がありますか？？

4

1 に答える 1

6

したがって、関数をサイズ変更リスナーでラップすると、機能するように見えます。また、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');

    }
});
于 2012-09-17T03:17:31.190 に答える