jquery - 常规导航菜单和汉堡包菜单切换 Jquery

Question

您好，我正在制作我的第一个网站，并试图获得一些应该非常简单易用但我做不到的东西。

所以我有一个基本的导航菜单，它 float 在标题的右侧。当屏幕宽度小于 650 像素时，我希望菜单消失并显示汉堡包(这太棒了，我已经知道了)

问题是当我在汉堡包上调用切换功能时，当我将窗口大小调整为 > 650 时它不会刷新。我已经尝试了所有方法，我相信一定有一个简单的方法，这是我的所有代码:

HTML:

<header>
    <div id="headLogo">
        <a href="clhome.php"><img src="images/primLogo2.png" 
alt="Imagehere"></a>
    </div>

    <div id="primHamMenu">
        <a href="#" id="primHamLink">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <div id="headNav">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Lingerie</a></li>
                <li><a href="#">Swim</a></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Technical</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

#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;*/
}

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

})

除切换功能外，一切正常

如有任何帮助，我们将不胜感激。谢谢

Answer 1

以正确的方式使用 matchMedia 来做到这一点。

$(document).ready(function () {
   var mq = window.matchMedia("(max-width: 630px)");
       mq.addListener(WidthChange);
       WidthChange(mq);

  function WidthChange(mq) {

    if (mq.matches) {
         $("#primHamMenu").show();
         $("#headNav").hide();
    } else {
       $("#primHamMenu").hide();
       $("#headNav").show();
   }

  }

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

});

#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;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div id="headLogo">
        <a href="clhome.php"><img src="images/primLogo2.png" 
alt="Imagehere"></a>
    </div>

    <div id="primHamMenu">
        <a href="#" id="primHamLink">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <div id="headNav">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Lingerie</a></li>
                <li><a href="#">Swim</a></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Technical</a></li>
            </ul>
        </nav>
    </div>
</header>