一次为一个项目添加红色边框？

Question

我做了一个有四个项目的侧边导航。单击某个项目时，会显示红色边框以表明它处于活动状态，再次单击时，边框会消失。

但是，我想要的是一次只显示一个边框，而不是为单击的任何项目显示多个边框。

const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
  const num_btn = card.querySelector('.menu_header')
  num_btn.addEventListener('click', () => {
    if (!card.classList.contains('active')) {
      card.classList.add('active');
    } else {
      card.classList.remove('active');
    }
  })
})

* {
  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;
}

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 {
  border-bottom: 1px solid red;
}

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

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>side nav</title>
</head>

<body>
  <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>
</body>

</html>

请帮我解决这个问题。

Answer 1

在添加当前 .main_list_item 之前，只需清除所有 active class 上的所有 active class。

const cards = document.querySelectorAll('.main_list_item');
cards.forEach((card) => {
  const num_btn = card.querySelector('.menu_header')
  num_btn.addEventListener('click', () => {
    if (!card.classList.contains('active')) {
    
    // Clear all borders
    cards.forEach((card)=> card.classList.remove('active'))
    
      card.classList.add('active');
    } else {
      card.classList.remove('active');
    }
  })
})

* {
  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;
}

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 {
  border-bottom: 1px solid red;
}

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

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>side nav</title>
</head>

<body>
  <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>
</body>

</html>

一次为一个项目添加红色边框？

add red border to one item at a time?

html

javascript

css