传统的导航菜单和汉堡菜单切换Jquery

嗨，我正在做我的第一个网站，并试图得到一些应该是非常简单的工作，但我不能

因此，我有一个基本的导航菜单，它浮动到标题的右侧。当屏幕宽度小于650px时，我希望菜单消失，汉堡包显示我得到了它

问题是，当我调用汉堡上的切换函数时，当我将窗口大小调整到>650时，它不会刷新。我已经尝试了一切，我相信一定有一个简单的方法，以下是我所有的代码：

HTML:

JQuery：

$(document).ready(function () {

var width = $(window).width();

    $(window).resize(function(){

        if(width > 650){
            $("#primHamMenu").hide();
            $("#headNav").show();
        }else{
            $("#primHamMenu").show();
            $("#headNav").hide();
        }

    })

    // toogle headNav
    $("#primHamMenu").click(function(){ 
        $("#headNav").toggle();
    });

}

除了切换功能外，其他功能都可以正常工作

任何帮助都将不胜感激。

---

谢谢你，用这种正确的方式使用matchMedia

$document.readyfunction{ var mq=window.matchMediamax-width:630px； mq.addListenerWidthChange； 宽度变化mq； 函数宽度更改MQ{ 如果mq.0匹配{ $primhammenus.show； $headNav.hide； }否则{ $prihmammenus.hide； $headNav.show； } } $primHamMenu.clickfunction{ $headNav.toggle； }; }; 普里姆哈默斯{ 宽度：4em； 保证金：0自动； 边缘底部：1米； /*显示：无*/ } 一望无际{ 宽度：100%； 边框底部：0.16em实心FFFF； 显示：块； 填充：0.41em； } /*-----Prim Nav媒体查询----*/ @媒体屏幕和最大宽度：920px{ 海德洛戈{ 浮动：无； 宽度：50%； 保证金：0自动； 位置：相对位置； 页边距底部：0； 填充底部：0； } 导航台{ 浮动：无； 宽度：100%； 保证金：0自动； 位置：相对位置； 顶部：自动； 右：自动； 边缘顶部：2米； } 中央导航{ 宽度：90%； } } @媒体屏幕和最大宽度：650px{ 海德洛戈{ 宽度：75%； } 导航台{ 转化：无； /*显示：无*/ } 中央导航{ 弯曲方向：立柱； 证明内容：周围的空间； 文本对齐：居中； } 李校长{ 利润率：1亿欧元1亿欧元； } 普里姆哈默斯{ /*显示：块*/ }

---

你试过把CSS放进标签吗？把它包在一个窗口中。调整大小。我试着去做，然后所有的东西都停止工作，我再尝试。我做了调整大小，一切都有效，但是菜单的切换功能没有解决这个问题，或者任何答案都解决了你的问题。请点击点击复选标记和上投票来接受它。对于更广泛的社区，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这么做：嗨，我设法让它发挥作用，但这更好，谢谢你欢迎@PeshotanPavri；

#primHamMenu{
width: 4em;
margin: 0 auto;
margin-bottom: 1em;
/*display: none;*/
}

#primHamMenu a span{
width: 100%;
border-bottom: 0.16em solid #ffffff;
display: block;
padding: 0.41em;
}

/*----------Prim Nav media queries-------*/

@media screen and (max-width: 920px){

#headLogo{
    float: none;
    width: 50%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
}

#headNav{
    float: none;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: auto;
    right: auto;
    margin-top: 2em;
}

#headNav ul{
    width: 90%;
}

}

@media screen and (max-width: 650px){

#headLogo{
    width: 75%;
}

#headNav{
    transform: none;
    /*display: none;*/
}

#headNav ul{
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}

#headNav ul li{
    margin: 1em 0 1em 0;
}

#primHamMenu{
    /*display: block;*/
}

$(document).ready(function () {

var width = $(window).width();

    $(window).resize(function(){

        if(width > 650){
            $("#primHamMenu").hide();
            $("#headNav").show();
        }else{
            $("#primHamMenu").show();
            $("#headNav").hide();
        }

    })

    // toogle headNav
    $("#primHamMenu").click(function(){ 
        $("#headNav").toggle();
    });