如何使用JavaScript实现仅允许一个折叠面板同时展开

我的网页右侧有一个包含4个按钮的列表，点击按钮会显示对应内容，当前通过JavaScript的EventListener切换active类实现显示/隐藏，按钮还通过onclick="myFunction()"控制右侧箭头图标的显示/隐藏。现在需要修改为仅允许一个内容区域同时展开的效果。

核心逻辑 #

要实现单一展开，每次点击按钮时，先把所有已展开的内容收起、移除active类、恢复箭头显示，再单独处理当前点击的按钮和对应内容。

修改后的完整代码 #

1. HTML（仅修改myFunction传参） #

<div class="container-fluid">
  <div class="sec2">
    <h1>A 44-letter alphabet.</h1>
    <h1>A phonetically consistent language.</h1>
    <h1>A determined teacher you can count on.</h1>
  </div>
  <div class="sec3">
    <ul class="sec2drop">
      <li>
        <button onclick="myFunction(this)" class="collapsible" id="colly1">
          Prepare for a language exam
          <i class="fa fa-caret-right" id="arrow0"></i>
        </button>
        <div class="content">
          <p>
            A hundred different reasons, one perfect outcome. Maybe you
            were born to Hungarian parents abroad, and decided to take a
            Hungarian language exam to replace one of your high school
            leaving exams.
          </p>
          <p>
            Maybe you're going to be an exchange student in Hungary or
            work there for some time. I'm happy to prepare you in video
            call sessions, both with verbal and written training.
          </p>
        </div>
      </li>
      <li>
        <button onclick="myFunction(this)" class="collapsible" id="colly2">
          Hungarian for kids
          <i class="fa fa-caret-right" id="arrow1"></i>
        </button>
        <div class="content">
          <p>
            Many Hungarians living abroad would like to teach their
            linguistics or national heritage. I will tailor online
            sessions for your child that suites their and your needs the
            best.
          </p>
          <p>
            You decide if you would like to supervise or participate in
            the lesson. Generally, children under 8 require parental or
            older sibling presence.
          </p>
        </div>
      </li>
      <li>
        <button onclick="myFunction(this)" class="collapsible" id="colly3">
          Take on a challenge
          <i class="fa fa-caret-right" id="arrow2"></i>
        </button>
        <div class="content">
          <p>
            Whether you spontaneously decided to learn one of the hardest
            languages in the world, or you want to reconnect with your
            Hungarian heritage, I will guide you along the way. Are you a
            newbie or an advanced learner? Would you like specific types
            of homework in between lessons? I will adapt to your needs.
          </p>
        </div>
      </li>
      <li>
        <button onclick="myFunction(this)" class="collapsible" id="colly4">
          Translation services
          <i class="fa fa-caret-right" id="arrow3"></i>
        </button>
        <div class="content">
          <p>
            English to Hungarian or Hungarian to English. You can book my
            written translation services and choose the package most
            suitable to you.
          </p>
        </div>
      </li>
    </ul>
  </div>
</div>

2. CSS（保持原代码不变） #

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  cursor: pointer;
  padding: 18px;
  margin-left: 10px;
  border: none;
  font-size: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0px 18px;
  display: none;
  overflow: hidden;
  background-color: wheat;
}

3. JavaScript（核心修改） #

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function () {
    // 先处理所有非当前的面板：收起内容、移除active类、显示箭头
    for (let j = 0; j < coll.length; j++) {
      if (coll[j] !== this) {
        coll[j].classList.remove("active");
        coll[j].nextElementSibling.style.display = "none";
        coll[j].querySelector(".fa-caret-right").style.display = "block";
      }
    }

    // 再处理当前点击的面板
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    const arrow = this.querySelector(".fa-caret-right");
    
    if (content.style.display === "block") {
      content.style.display = "none";
      arrow.style.display = "block";
    } else {
      content.style.display = "block";
      arrow.style.display = "none";
    }
  });
}

// 优化后的箭头控制函数（和点击事件逻辑一致，避免全局切换）
function myFunction(btn) {
  // 先显示所有箭头
  document.querySelectorAll(".fa-caret-right").forEach(arrow => {
    arrow.style.display = "block";
  });
  // 隐藏当前按钮的箭头
  btn.querySelector(".fa-caret-right").style.display = "none";
}

修改说明 #

1. 点击按钮时优先遍历所有面板，将非当前面板的状态统一重置为收起
2. 单独处理当前面板的展开/收起，同时同步箭头的显示状态
3. 修改了myFunction的传参和逻辑，避免原代码中点击任意按钮就切换所有箭头的问题，现在只控制当前按钮的箭头

内容的提问来源于stack exchange，提问作者Declan Davies