Javascript 使用vanilla js切换类_Javascript

Javascript 使用vanilla js切换类

javascript

Javascript 使用vanilla js切换类,javascript,Javascript,我正在尝试更改导航栏中元素的类。这个想法是一个基本的可点击汉堡图标，当点击时显示导航菜单这是HTML。我试图将ul的类名与标题列表的类切换为打开的类名标题列表 <body>  <header> <div class="nav-container"> <nav> <h2 class="company-name">Sus

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

这是HTML。我试图将

ul

的类名与

标题列表的类切换为打开的类名标题列表
<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
var toggleClass = document.querySelector('.menu-toggle');
var classSwitch = document.querySelector('.header-list');

toggleClass.addEventListener('click', function () {
  console.log('hello');
  classSwitch.classList.toggle('header-list-open');
});

我已经尝试过这个版本的JS代码和其他几个版本。控制台正在记录“hello”，因此实际的点击是有效的。只是不是类切换。
当您应用其他类时，其他CSS规则仍在应用中，因此您的CSS现在是：
.header-list {
  height: 0;
  overflow: hidden;
  list-style: none;
  position: absolute;
  top: 100%;
  right: 0;
}

因此，您需要删除类标题列表，或者在打开的类中设置高度和溢出
或者，与其设置高度/溢出，不如直接将显示设置为“无”，然后将其设置为“打开时阻塞”
切换切换所输入的类。它不会更改类的名称。@KevinB我认为OP正在尝试将CSS类的名称从标题列表
更改为标题列表打开。。。或者是我从问题中读到的，我认为这只是对结果的误解。快速查看浏览器控制台中的元素及其计算样式，可以相对快速地解释发生了什么事情高度仍然为零，溢出仍然隐藏。。。。。
.header-list {
  height: 0;
  overflow: hidden;
  list-style: none;
  position: absolute;
  top: 100%;
  right: 0;
}