ウィンドウサイズが大きくなるとjQueryモバイルメニューが消えない

Question

小さなデバイスではjQueryモバイルメニューを切り替えることができますが、ブラウザが一定の幅に達すると消えてしまいます。ブラウザを更新するときに機能しますが、ブラウザの幅を実際に変更しているときは機能しません。私はcodepenへのリンクを含んでいます、どんな助けも高く評価されるでしょう！

http://codepen.io/abharms/pen/rePryZ

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

ブラウザウィンドウのサイズを変更するときに反応メニューを非表示にしたい場合は、これをjQueryに追加するだけです。

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

ここ

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

やメディアクエリ

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

Answer 2

あなたは以下のように反応するため、 ".resize（機能（）" 機能を試すことができます。

$(window).resize(function(){ 

});