外部スタイルはjavascriptで検出されない（conditonが使用されている場合）

Question

私はウェブ開発に相対的に新しいので、プロジェクトサイトのレスポンシブルデザインを開発する際に、外部への出力行が存在するにもかかわらずハンバーガーメニューが押されたときCSSファイルが検出されませんが、新しいinineスタイルはjavascriptによって作成され、期待どおりに動作します。 HTML：

<nav class="mobileNav" id="mobileMenu"> 
    <a class="mol-6" onclick="show();" href="index.html"> 
     <figure> 
      <img class="icon" src="images/nav/home.png" alt=""> 
      <figcaption>Home</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="astronomy.html"> 
     <figure> 
      <img class="icon" src="images/nav/astro.png" alt=""> 
      <figcaption>Astronomy</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="telescope.html"> 
     <figure> 
      <img class="icon" src="images/nav/tele.png" alt=""> 
      <figcaption>Telescopes</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="about.html"> 
     <figure> 
      <img class="icon" src="images/nav/about.png" alt=""> 
      <figcaption>About</figcaption> 
     </figure> 
    </a> 
</nav> 

CSS：

#mobileMenu { 
font-family: light, sans-serif; 
max-height: 0px; 
z-index: 99; 
transform: translateY(-100%); 
overflow: hidden; 
padding: 0px; 
transition: transform 0.5s; 
} 

Javascriptを：

function show() { 
if (document.getElementById("mobileMenu").style.maxHeight == "0px") { 
    setTimeout(function(){ 
     document.getElementById("mobileMenu").style.maxHeight = "100%"; 
     document.getElementById("mobileMenu").style.position = "fixed"; 
     document.getElementById("mobileMenu").style.padding = "1%"; 
    }, 1) 
    document.getElementById("mobileMenu").style.transform = "translateY(0px)"; 
} else { 
    setTimeout(function(){ 
     document.getElementById("mobileMenu").style.maxHeight = "0px"; 
     document.getElementById("mobileMenu").style.padding = "0px"; 
     document.getElementById("mobileMenu").style.position = "relative"; 
    }, 500) 
    document.getElementById("mobileMenu").style.transform = "translateY(-100%)"; 
}} 

実施例： Astromuneeb (Require Portrait Orientation)

すべてのヘルプは理解されるであろう。

Answer 1

あなたが達成しようとしているもののより良いアプローチがあります。たとえば、CSSクラスをスタイリングに使用し、JavaScriptクラスを切り替えクラスにのみ使用できます。

Answer 2

私はEugeneに同意しますが、.mobileNavクラスはあなたのポートレートメディアクエリを無効にしているようです。

私はあなたの.mobileNav肖像メディアクエリーへの重要な追加でさえ、それは階層で行うには、その何かを推測、それを上書きしません。あなたが現在開閉しているときに、あなたのナビにインラインスタイルとしてdisplay:none;を得るのは変です。それは助けになりません。

ユージンが提案するように、ちょうど.openクラスを設定してください。また、CSS変換を使用してアニメーションを行います。そして、単にnavにクラスを追加/削除するだけです。

とするとき、モバイルなどのCSSメディアクエリを使用すると、画面サイズなどを使用するのが最善PROB、および助言のためのモバイル最初の...

.mobileNav { display: block; } 

@media (min-width: 992px) { 
    .mobileNav { display: none; } 

}