JavaScriptのモバイルメニューは、ダブルクリックすると表示されます。

Question

私はHTML/CSS3とVanilla JSだけで友人のためのウェブサイトを作っています。すべてがうまくいくように見えますが、モバイルメニューが2回クリックされると、そのメニューが開くのはなぜ分かりません。これは、ページを更新した後で最初にクリックするときにのみ行います。開いたら、ワンクリックでもう一度開いたり閉じたりできます。ここで

は問題は間違いなくCSSではありません関連するHTML

  <header id = "top-menu"> 
      <img id = "title-image" class = "desktop-site" src = "images/ben-the-mover-guy.png"> 
      <img id = "mobile-title-image" class = "mobile-site" src = "images/mobile-title-white.png"> 
      <h1 id = "title-text">Ben the Mover Guy</h1> 
      <a id = "mobile-icon" href = "javascript:void(0);" onClick = "dropDown()"><i id = "mobile-icon-id" class = "ion-navicon-round"></i></a> 
      <nav id = "icon-nav" class = "desktop-site"> 
       <a href = "#"><i class = "ion-social-facebook"></i></a> 
       <a href = "#"><i class = "ion-android-mail"></i></a> 
       <a href = "#"><i class = "ion-ios-calculator"></i></a> 
      </nav> 
      <nav id = "main-nav" class = "horizontal-nav desktop-site"> 
       <span class = "selected"><a href = "#" class = "nav-link">ABOUT</a></span> 
       <a href = "#" class = "nav-link">RATES</a> 
       <a href = "#" id = "link-break" class = "nav-link"> <span class = "link-break-line">PREPARING FOR</span> YOUR MOVE</a> 
       <a href = "#" class = "nav-link">CONTACT</a> 
      </nav> 
     </header> 

とJavascript

function dropDown() { 
var x = document.getElementById("main-nav"); 
var y = document.getElementById("mobile-icon-id"); 

if (x.className === "horizontal-nav") { 
    x.className = "mobile-nav"; 
    y.className = "ion-close-round" 
} else { 
    x.className = "horizontal-nav"; 
    y.className = "ion-navicon-round" 
} 
} 

です。 「Inspect Element」を打った後、2回目のクリックまでクラス名を「mobile-nav」に変更していないことに気づいたので、JSの問題です。

私は似たようなコードを使用していましたが、私はこの問題を抱えていませんでした。唯一の違いは、 ''タグの代わりにnavリンクのリストを並べ替えたdivを使用したことです。それはそれとは何の関係もないだろうか？

Answer 1

これに変更あなたのjsの関数を、それが動作します。..

function dropDown() { 
    var x = document.getElementById("main-nav"); 
    var y = document.getElementById("mobile-icon-id"); 
    if (x.classList.contains("horizontal-nav")) { 
     x.className = "mobile-nav"; 
     y.className = "ion-close-round" 
    } else { 
     x.className = "horizontal-nav"; 
     y.className = "ion-navicon-round" 
    } 
} 

Answer 2

className属性をチェックしているのは、すべての要素のクラスが含まれているためです。初めてチェックされたとき、値はhorizontal-nav - horizontal-nav desktop-siteであり、elseブロックのコードが起動します。 2度目の回でははhorizontal-navなので正しく動作します。使用x.classList.contains("horizontal-nav")

、またはclassNameがhorizontal-navあるのではなく、horizontal-navが含まれているかどうかを確認する方法を使用/構築。古いブラウザをサポートする必要がある場合は、jQueryのhasClassが完璧に機能します。 ）;