如何用JavaScript实现点击按钮时关闭其他按钮的内容

问题场景 #

点击页面上的“About Me”“Education and Achievements”等按钮时，对应的内容区域会展开，但切换按钮时，之前展开的内容不会自动关闭，导致内容重叠。需要实现点击任一按钮时，自动关闭其他已展开的内容，同时支持点击同一按钮切换展开/收起状态。

修改后的完整代码 #

<div class="container">
  <button id="one" class="click one">About Me</button>
  <div class="list-1 sec">
    <h1 class="content-header-one content">Dummy text header</h1>
    <p class="content-paragraph-one">Dummy text</p>
  </div>
  <button class="click two">Education and Achivements</button>
  <div class="list-2 sec">
    <p class="content-paragraph2 content">Dummy text</p>
    <ul class="content-list content">
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button class="click three" >Other</button>
  <div class="list-3 sec">
    <h1 class="content-header-two content">Dummy text header</h1>
    <p class="content-paragraph3 content">Dummy text</p>
  </div>
  <script>
    // 批量获取所有按钮和内容区域
    const buttons = document.querySelectorAll('.click');
    const sections = document.querySelectorAll('.sec');

    buttons.forEach((button, index) => {
      button.addEventListener('click', () => {
        // 先移除所有内容区域的展开类，关闭所有已展开内容
        sections.forEach(section => section.classList.remove('newlist'));
        // 切换当前按钮对应内容区域的展开/收起状态
        sections[index].classList.toggle('newlist');
      });
    });
  </script>
</div>

代码说明 #

• 用querySelectorAll一次性获取所有按钮（.click类）和内容区域（.sec类），减少重复代码，便于后续扩展更多按钮
• 遍历每个按钮绑定点击事件：
  1. 点击时先遍历所有内容区域，移除newlist类，确保所有内容都处于关闭状态
  2. 对当前按钮对应的内容区域调用toggle方法，实现展开/收起的切换
• 修复了原代码中第二个按钮事件里的语法错误（多余的lis字符）

内容的提问来源于stack exchange，提问作者A guy with questions