我的javascript移动菜单仅在双击时打开。

我正在使用HTML/CSS3和Vanilla JS为我的朋友创建一个网站。一切似乎都很顺利，但我不明白为什么我的手机菜单只有在我点击两次后才会打开。它只在我刷新页面后第一次尝试单击它时才执行此操作。一旦它打开，我可以打开和关闭它再次点击

下面是相关的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>

问题绝对不是CSS。在点击Inspect元素之后，我注意到直到第二次点击它才将类名更改为“mobile nav”，所以这是JS的问题

---

不久前我做了一个模拟网站，在那里我使用了类似的代码，我没有这个问题。唯一的区别是我使用了一个带有无序列表的div作为导航链接，而不是“”标记。那跟这事没关系吧

发生这种情况的原因是您正在检查

className

属性，该属性包含元素的所有类。第一次检查时，该值不是

水平导航

——它是

水平导航桌面站点

，这会导致

else

块中的代码触发。第二次是

水平导航

，因此工作正常

---

使用

x.classList.contains（“水平导航”）

，或构建/使用方法检查

className

是否包含

水平导航

，而不是

水平导航

。如果您需要支持较旧的浏览器，jQuery的

hasClass

可以很好地实现这一点。

将您的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"
  }
}

---

我想说你的问题是悬停。在移动设备上，鼠标悬停是第一次单击。

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"
  }
}