单击导航后jquery窗口调整大小中断答案

【问题标题】：jquery window resize breaks after navigation is clicked单击导航后jquery窗口调整大小中断
【发布时间】：2013-06-17 13:26:18
【问题描述】：

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

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

【问题讨论】：

我重新安排了一些事情，结果是这样的：jsfiddle.net/MiauMiau/wtzKW 调整大小的窗口应该在一个额外的块中。我不确定这是否是最好的方法，但它对我有用。

标签： jquery resize window

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

【讨论】：