Question

我在jQuery中做得更大，并且当窗口小于750px时尝试构建一个汉堡包菜单，并且它的工作方式与之相符。问题是，当我调整窗口大小超过750px时，汉堡包不会变回常规菜单。我尝试了$（window）.resize，但它没有做我想要的。

我的jQuery代码 $（document）.ready（function（）{ var width = $（window）.width（）;

if (width <= 750) {        
    //Variables
    var ham = $('.hamburger');
    var nav = $('nav')

    //Hamburger Function
    ham.show();
    ham.click(function() {
        $('.menu').toggle();
    });

    //Navigation Menu Function
    nav.hide();      

} else {
    $('p').append('Bigger than 750');
}

}）;

http://jsfiddle.net/IrvinBurciaga/0vn00oLh/

Answer 1

$（window）.resize应该是正确的函数，但你还需要调用函数来检查以确保菜单正确显示

//initialize the hamburger menu once on ready
$(document).ready(function() {
     var ham = $('.hamburger');

    //Hamburger Function
    ham.show();
    ham.click(function() {
        $('.menu').toggle();
    }); 

    //call the checkWindowWith by yourself on ready
    checkWindowWidth();
});

//register the resize function
$(window).resize(checkWindowWidth);

function checkWindowWidth() {
    var width = $(window).width();

    if (width <= 750) { 
        $('.hamburger').show();
        $('.nav').hide();          
    } else {
        $('.hamburger').hide();
        $('nav').show();
    }
}

jsfiddle demo

使用jQuery在窗口大小调整上显示或隐藏元素

1 个答案: