jQuery window 尺寸增大时移动菜单不会消失

Question

我的 jQuery 移动菜单可以在小型设备上切换，但我希望它在浏览器达到特定宽度时消失。它在您刷新浏览器时起作用，但在您实际更改浏览器宽度时不起作用。我已经在 codepen 中加入了 link，如有任何帮助，我们将不胜感激！

HTML

       <header>    
        <div class="hamburger"><a href="#nav">&equiv;</a></div>
        <div class="logo">
           <img src="img/logo.png" alt="photographer logo">
        </div><!--end .logo-->
            <div class="">  
              <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Investment</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul> 
            </div>

        <div id="mobileMenu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Investment</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>

CSS

header {
margin: 1em 0;
}
.logo {
display: inline-block;
margin-left: 16%;
}
.logo img {
width: 200px;
}
.hamburger {
display: inline-block;

margin-left: 1rem;
}
.hamburger a {
text-decoration: none;
color: #7f8c8d;
font-size: 36px;
}

#mobileMenu {
display: none;
width: 96%;
}

#mobileMenu ul {
list-style-type: none;
padding-left: 20px;
}

#mobileMenu li {
padding: 4px 0 4px 0;
border-bottom: 1px solid #7f8c8d;
}

#mobileMenu a {
text-decoration: none;
text-transform: uppercase;
color: #7f8c8d;

}

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

.menu {
    display: none;
}

}

@media screen and (min-width: 1025px) {

.hamburger,
#mobileMenu {
    display: none;
}

.menu {
    list-style-type: none;
}
ul.menu {
    float: right;
    margin-right: 10%;
}
.menu li {
    float: left;
}
.menu li a {
    text-decoration: none;
    padding: 0 15px;
    color: #7f8c8d;
    font-size: .75rem;
    text-transform: uppercase;
    border-right: solid 1px gray;
}
.menu li:last-child {
    border-right: none;
}

.logo {
    float: left;
}
.logo img {
    margin: 0 auto;
}

}

jQuery

$(".hamburger").click(function(){

if ($(".hamburger").css("display") === "inline-block" ){
    $("#mobileMenu").fadeToggle();
} else {
    $("#mobileMenu").remove();
}

});

Answer 1

您可以尝试使用“.resize(function()”函数进行响应，如下所示：

$(window).resize(function(){

});

Answer 2

如果您希望在调整浏览器大小时隐藏响应式菜单 window，只需将其添加到您的 jQuery。

$(window).resize(function(){
  $("#mobileMenu").hide();
})

它在这里工作的例子

http://codepen.io/jcoulterdesign/pen/RadwMr

或者使用媒体查询

@media screen and (max-width:600px){ 
    #mobileMenu { 
        display: none !important; 
    } 
}

jQuery window 尺寸增大时移动菜单不会消失

jQuery mobile menu not disappearing when window size increases

css

mobile

jquery

menu

responsive