使菜单 header 一次变红？

Question

最近想玩 JavaScript 直到我卡在这里...

我制作了四个菜单 header，单击时每个菜单都会变成红色，以表明菜单 header 处于“活动状态”。然而，问题是，我希望一次只有一个变红，而不是所有菜单 header 每次 header 单击都变红。

let menuHeader = document.querySelectorAll('div.menu_header');

menuHeader.forEach((head) => {
  head.addEventListener('click', () => {
    if (!head.classList.contains('active_red')) {
      head.classList.add('active_red');
    } else {
      head.classList.remove('active_red');
    }
  })
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: 'Ebrima';
  background-color: #444444;
}

nav#nav_menu_query_off {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #222222;
  overflow: auto;
  z-index: 2;
  padding: 20px 0 20px 20px;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
  text-transform: uppercase;
  padding-bottom: 10px;
  cursor: pointer;
}

nav#nav_menu_query_off menu li {
  color: #f0f0f0;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
  padding-top: 20px;
}

.active_red {
  color: red;
}

nav::-webkit-scrollbar {
  display: none;
}

<nav id="nav_menu_query_off">
  <menu id="main_menu">
    <li class="main_list_item">
      <div class="menu_header">menu one</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu two</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu three</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu four</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
  </menu>
</nav>

有人帮帮我吗？

Answer 1

您需要循环遍历其他 menuHeaders 并先删除所有 active_red class，然后将 class 应用到当前元素。

const menuHeaders = document.querySelectorAll('.menu_header');

function removeClass(els) {
  els.forEach(mh => mh.classList.remove('active_red'));
}

menuHeaders.forEach(head => {
  head.addEventListener('click', () => {
    if (head.classList.contains('active_red')) {
      removeClass(menuHeaders);
    } else {
      removeClass(menuHeaders); 
      head.classList.add('active_red');
    }
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: 'Ebrima';
  background-color: #444444;
}

nav#nav_menu_query_off {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100vh;
  background-color: #222222;
  overflow: auto;
  z-index: 2;
  padding: 20px 0 20px 20px;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item div.menu_header {
  text-transform: uppercase;
  padding-bottom: 10px;
  cursor: pointer;
}

nav#nav_menu_query_off menu li {
  color: #f0f0f0;
}

nav#nav_menu_query_off menu#main_menu li.main_list_item:not(:first-child) {
  padding-top: 20px;
}

.active_red {
  color: red;
}

nav::-webkit-scrollbar {
  display: none;
}

<nav id="nav_menu_query_off">
  <menu id="main_menu">
    <li class="main_list_item">
      <div class="menu_header">menu one</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu two</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu three</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
    <li class="main_list_item">
      <div class="menu_header">menu four</div>
      <div class="menu_body">
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
        <menu class="sub_menu"></menu>
      </div>
    </li>
  </menu>
</nav>

Answer 2

您可以试试这个解决方案：

let menuHeader = document.querySelectorAll('div.menu_header');

menuHeader.forEach((head) => {
  head.addEventListener('click', () => {
    const elements = document.getElementsByClassName('active_red');

    if (head === elements[0]) {
      head.classList.remove('active_red');
    } else {
      if (elements[0]) elements[0].classList.remove('active_red');
      head.classList.add('active_red');
    }
  });
});

使菜单 header 一次变红？

make menu header turn red one at a time?

html

javascript

css