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 回答