使用jQuery在窗口调整大小上显示或隐藏元素 [英] Display or hide elements on window resize using jQuery

问题描述

我在jQuery中更大，并且尝试在窗口小于750px并按预期运行时构建汉堡菜单.问题是，当我将窗口的大小调整为大于750px时，汉堡包不会更改回常规菜单.我尝试了$(window).resize，但它没有达到我想要的目的.

I'm a bigger in jQuery and trying to build a hamburger menu when the window is smaller than 750px and it works how it suppose to. The problem is that when I resize the window to be more than 750px the hamburger doesn't change back to a regular menu. I tried $(window).resize but it doesn't do what I want it to.

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

My jQuery Code $(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/

推荐答案

$(window).resize应该是正确的函数，但是您还需要调用该函数进行初始检查以确保菜单正确显示

$(window).resize should be the correct function but you also need to call the function to check initially to ensure the menu is shown correctly

//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演示

这篇关于使用jQuery在窗口调整大小上显示或隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！