jQueryドロップダウンメニューとCSS Mediaクエリが矛盾しています

Question

だから、まずはHTMLを考えてみましょう。おそらくそれをここに置くことを心配する必要はありませんが、私はあなたにとにかくあなたを見せます。

 <div class="menu col md12 sm02 mn03"> 
      <div class="lines"></div> 
      <div class="lines"></div> 
      <div class="lines"></div> 
     </div> 
     <div class="nav col mx07 lg08 md12 sm12 mn12"> 
      <ul> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Company</a></li> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Solutions</a></li> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Services</a></li> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Websites</a></li> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Software</a></li> 
       <li class="col mx02 md02 sm04 mn06"><a href="#">Contact</a></li> 
      </ul> 
     </div> 

これでCSSが表示されます。私は私のメニューボタンが隠れたままになるようにそれを設定しました。

.menu {display: none;} 

そして、画面が701ピクセルを下回ると、メディアのクエリーが開始されます。その一部はこれです。

.menu {display: inherit;} 
.nav {display: none;} 

次に、良いol 'jQueryが表示され、メニューボタンをクリックするとナビゲーションバーが切り替わります。

$(document).ready(function() { 
    $(".menu").click(function() { 
     $(".nav").toggle("slow"); 
    }); 
}); 

これで問題が解決しました。私はメニューボタンをアクティブにし、ナビゲーションバーを隠す小さな画面サイズに行きます。メニューボタンをクリックすると、navbarが表示されます。やめ！もう一度クリックすると、消えます。やめ！

大きな画面サイズに戻ると、ナビゲーションバーが戻ってきません。メニューボタンは消えますが、小さいサイズに戻ってからトグルしてからもう一度大きなサイズに戻らなければ、ナビゲーションバーは表示されません。私はここで何が起こっているのか知っています、それは簡単な部分です。 JqueryはCSSを変更して上書きし、ブラウザに「OK、それをすべて非表示にする」と伝えます。

トグル状態に関係なく、大きな画面サイズに戻ると、ナビゲーションバーが表示されるようにするにはどうすればよいですか。

私はこの最後の部分のコードはもうありませんが、Javascriptが画面サイズを確認していた場所に1点ありましたが、JSとCSSの画面サイズは決して同じではありませんでしたその解決策。

ご回答いただきありがとうございます。

Answer 1

これらのクラスを「visible-visible visible-md」にするとうまくいく可能性があります。私はあなたがブートストラップを使用していると仮定しています。

Answer 2

は、溶液、代わりにJavaScriptでmatchMedia（）

//screen size variables 
var mqmn = window.matchMedia("screen and (min-width: 150px) and (max-width: 400px)") 
var mqsm = window.matchMedia("screen and (min-width: 401px) and (max-width: 550px)") 
var mqmd = window.matchMedia("screen and (min-width: 551px) and (max-width: 700px)") 
var mqlg = window.matchMedia("screen and (min-width: 701px) and (max-width: 850px)") 

//toggle drop-down menu 
$(document).ready(function() { 
    $(".menu").click(function() { 
     $(".nav").toggle("slow"); 
    }); 
    $(window).resize(function(){ 
     if (mqmn.matches){ 
      //mn size 
      $(".menu").show(); 
      $(".nav").hide(); 
     } else if (mqsm.matches) { 
      //sm size 
      $(".menu").show(); 
      $(".nav").hide(); 
     } else if (mqmd.matches) { 
      //md size 
      $(".menu").show(); 
      $(".nav").hide(); 
     } else if (mqlg.matches) { 
      //lg size 
      $(".menu").hide(); 
      $(".nav").show(); 
     } else { 
      //mx size 
      $(".menu").hide(); 
      $(".nav").show(); 
     } 
    }); 
});