Question

对于较小的视口，我构建了一个图标，可在单击时打开并显示导航。在较大的视口上，图标不应该是可见的。不幸的是，按钮仅在调整大小时出现/消失，但最初在页面加载时不显示。

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按钮仅出现在较小的视口上。谢谢你看着它。看起来很简单，但为什么这个按钮出现在视口＆gt; 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');
    }
});

Answer 1

我找到了一个使用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;
});

单击导航后，jquery窗口调整大小

1 个答案: