Question

我正在使用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>

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

问题绝对不是CSS。点击Inspect Element之后，我注意到它没有将类名改为＆＃34; mobile-nav＆＃34;直到第二次点击，这是JS的一个问题。

前一段时间我做了一个模拟网站，我使用了类似的代码，但我没有遇到这个问题。唯一的区别是我使用带有无序列表的div用于导航链接而不是＆＃39;＆＃39;标签。这不会与它有任何关系吗？

Answer 1

发生这种情况的原因是因为您正在检查className属性，该属性包含元素的所有类。第一次检查时，值不是horizontal-nav - 它是horizontal-nav desktop-site，这会导致else块中的代码触发。第二次，它是 horizontal-nav，所以它可以正常工作。

使用x.classList.contains("horizontal-nav")，或构建/使用方法检查className是否包含horizontal-nav而不是horizontal-nav。如果你需要支持旧的浏览器，jQuery的hasClass可以很好地完成这项工作。

Answer 2

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

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

2 个答案: