0

小さいビューポート用に、クリックすると開き、ナビゲーションを表示するアイコンを作成しました。大きなビューポートでは、アイコンは表示されません。残念ながら、ボタンはサイズ変更時にのみ表示/非表示になりますが、ページがロードされたときは最初は表示されません。

jQuery(document).ready(function($) {
 var responsive_viewport = $(window).width();
$(window).resize(function(){
if (responsive_viewport < 768) {
   $('.top-nav').css('display', 'none'),
   $('.menutop').css('display', 'block')
     $(function(){
     $('.menutop').toggle(function(){
     $('.top-nav').show('slow');
     }, function(){
     $('.top-nav').hide('slow');
   });
 });
}
if (responsive_viewport >= 768) {
   $('.menutop').css('display', 'none')
   $('.top-nav').css('display', 'block')
       }    
});  
});

ウィンドウのサイズ変更機能を含めない場合、.menutop ボタンは小さなビューポートにのみ表示されます。ご覧いただきありがとうございます。とても単純に思えますが、なぜこのボタンが 768 を超えるビューポートに表示されるのでしょうか?

質問を削除する方法がわからないため (そして、誰かが同じ問題に遭遇した可能性があります)、解決策を見つけました。

リサイズ機能とレスポンシブウィンドウを分離する必要があります: http://jsfiddle.net/MiauMiau/wtzKW/ それでも少し面倒ですか?

var windowSize = $(window).width();
if (windowSize < 768) {
    $('.menu-top').css('display', 'block');
    $('.top-nav').css('display', 'none');
        $('.menu-top').click(function () {
            $('.top-nav').toggle('slow');
         });

} else {
    $('.menu-top').css('display', 'none'),
    $('.top-nav').css('display', 'block');
}

$(window).on('resize', function (event) {
    var windowSize = $(window).width();
    if (windowSize < 768) {
        $('.menu-top').css('display', 'block');
        $('.top-nav').css('display', 'none');
    } else {
        $('.menu-top').css('display', 'none'),
        $('.top-nav').css('display', 'block');
    }
});
4

1 に答える 1

0

modernizr.js を使用して解決策を見つけました。

function doneResizing() {
    if (Modernizr.mq('screen and (max-width:768px)')) {
        $('.menu-top').css('display', 'block');
        $('.top-nav').css('display', 'none');
        $('.menu-item').click(function () {
            $(this).parent().hide('slow');
            $(this).parent().removeClass('isShow');
        });
    } else if (Modernizr.mq('screen and (min-width:767px)')) {
        $('.menu-top').css('display', 'none'),
        $('.top-nav').css('display', 'block');
        $('.menu-item').unbind('click').click();
    }
}

var id;
$(window).resize(function () {
    clearTimeout(id);
    id = setTimeout(doneResizing, 0);
});

doneResizing();
$('.menu-top').click(function (event) {
    event.preventDefault();
    if ($('.top-nav').hasClass('isShow')) {
        $('.top-nav').hide('slow');
        $('.top-nav').removeClass('isShow');
    } else {
        $('.top-nav').show('slow');
        $('.top-nav').addClass('isShow');
    }
    return false;
});
于 2013-06-18T15:58:51.313 に答える