Question

我正在尝试更改导航栏中元素的类。这个想法是一个基本的可点击汉堡包图标，在点击时会显示一个导航菜单。

这是HTML。我正在尝试将x =[1,3,4,5,5,5,5,6,8,9] print(x) output:[1,3,4,5,6,8,9]的班级名称与ul班级切换为班级名称header-list。

header-list-open

这是可能相关的CSS。

<body>
  <!-- Start of Navigation Bar -->
  <header>
    <div class="nav-container">
      <nav>
        <h2 class="company-name">Sustained Garden Co</h2>
        <ul class="header-list">
          <!-- Navigation Links -->
          <li class="header-list-item"><a href="#about">About</a></li>
          <li class="header-list-item"><a href="#services">Services</a></li>
          <li class="header-list-item"><a href="#gallery">Gallery</a></li>
          <li class="header-list-item"><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div class="menu-toggle">
        <div class="hamburger"></div>
      </div>
    </div>
  </header>
  <!-- End of Navigation Bar -->
  <!-- Start of main content -->
  <main></main>
  <script src="script.js"></script>
</body>

这是JS

.header-list {
  height: 0;
  overflow: hidden;
}
.header-list-open {
  list-style: none;
  position: absolute;
  top: 100%;
  right: 0;
}

我已经尝试过这个版本的JS代码和其他几个代码。控制台正在记录“hello”，因此实际的点击工作正常。只是没有班级切换。

Answer 1

当您应用其他类时，其他CSS规则仍在应用，因此您的CSS现在是：

.header-list {
  height: 0;
  overflow: hidden;
  list-style: none;
  position: absolute;
  top: 100%;
  right: 0;
}

因此，您需要删除类标题列表或在open类中设置高度和溢出。

或者不是设置高度/溢出，为什么不将显示设置为无，并将其设置为打开时阻止？

用vanilla js切换类

1 个答案: