Question

这是我第一次编写JS函数。我试图在单击汉堡包时打开导航栏，但是它不起作用。我已经附上了HTML和JS。当我不允许该函数具有任何参数，而是在nav_type所在的位置手动编写“ nav”时，它可以工作，所以我不确定为什么它不起作用。

代码：

/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction(nav_type) {
  var i;
  var x;
  for (i = 1; i < 6; i++) {
    x = document.getElementById(nav_type + i);
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
}

<nav aria-label="Main Navigation" class="topnav">
  <a aria-hidden="true" href="javascript:void(0);" ; class="menu show-mobile" onclick="myFunction(" nav ")">
    <img src="img/menu-icon.svg" alt="toggle menu" />
  </a>

  <ul class="topnav">
    <li><a href="index.html" class="show-mobile">Home</a></li>
    <li><a href="humans/humans.html" id="nav1">Humans</a></li>
    <li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
        </a></li>
    <li class="dropdown" id="nav3">
      <button class="dropbtn" id="nav4" onclick="myFunction(" drp ")">More
          <img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
        </button>
      <ul class="topnav dropdown-content">
        <li><a href="presentations.html" id="drp1">Presentations</a></li>
        <li><a href="about-islam.html" id="drp2">About Islam</a></li>
        <li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

您一起使用了多个引号，解析器正在考虑对我来说第一对引号的source$.pipe( forkJoin([of(1), of(2), of(3)]), ) .subscribe(console.log) // '1' '2' '3'属性的值是onload，其余的被认为是乱码。

同时使用双引号（“）和单引号（'）以避免此错误

"myFunction("

类似地

onclick="myFunction('nav')">

Answer 2

只需使用HTMLElement.classList.toggle(class)

document.querySelector('#navShow').addEventListener('click', () => {
  document.querySelector('ul.topnav').classList.toggle('show');
});

ul.topnav {
  display: none;
}

ul.topnav.show {
  display: block;
}

  <nav aria-label="Main Navigation" class="topnav">
    <a id="navShow" aria-hidden="true" href="#"; class="menu show-mobile">
        Menu
    </a>
    <ul class="topnav">
      <li><a href="index.html" class="show-mobile">Home</a></li>
      <li><a href="humans/humans.html" id="nav1">Humans</a></li>
      <li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
        </a></li>
      <li class="dropdown" id="nav3">
        <button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
          <img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
        </button>
        <ul class="topnav dropdown-content">
          <li><a href="presentations.html" id="drp1">Presentations</a></li>
          <li><a href="about-islam.html" id="drp2">About Islam</a></li>
          <li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </nav>

对于更现代的方法，请完全将Javascript用作该函数。在这里，我们结合使用标签和隐藏复选框以及CSS来控制菜单的显示/隐藏。

#chkNav {
  display: none;
}

.nav-bar {
  display: block;
  width: 30px;
  height: 0px;
  margin-bottom: 2px;
  border: 3px solid black;
}

ul.topnav {
  display: none;
}

#chkNav:checked + ul.topnav {
  display: block;
}

<nav aria-label="Main Navigation" class="topnav">
    <label for="chkNav" aria-label="show nav">
      <span class="nav-bar"></span>
      <span class="nav-bar"></span>
      <span class="nav-bar"></span>
    </label>
    <input type="checkbox" id="chkNav" />
    <ul class="topnav">
      <li><a href="index.html" class="show-mobile">Home</a></li>
      <li><a href="humans/humans.html" id="nav1">Humans</a></li>
      <li><a href="other/other.html" id="nav2">Plants, Animals, the Universe, and Other
        </a></li>
      <li class="dropdown" id="nav3">
        <button class="dropbtn" id="nav4" onclick="myFunction("drp")">More
          <img src="img/down-arrow.svg" alt="dropdown arrow" class="dropdown-icon icon"/>
        </button>
        <ul class="topnav dropdown-content">
          <li><a href="presentations.html" id="drp1">Presentations</a></li>
          <li><a href="about-islam.html" id="drp2">About Islam</a></li>
          <li><a href="contact-us.html" id="drp3" class="active">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </nav>

为什么JavaScript函数无法打开汉堡菜单？

2 个答案: