JavaScript动态内容切换：多按钮实现与最佳实践

document.addEventListener("DOMContentLoaded", function() {
  // 获取所有具有 "ButtnExt" 类的按钮
  var collExt = document.getElementsByClassName("ButtnExt");

  // 定义事件处理函数
  function toggleContentAndText() {
    // 切换按钮自身的 "activeExt" 类，用于改变按钮样式
    this.classList.toggle("activeExt");

    // 切换紧邻的兄弟元素（内容区域）的 "exptextExt" 类，用于显示/隐藏内容
    // 注意：确保内容区域是按钮的紧邻兄弟元素
    if (this.nextElementSibling) {
      this.nextElementSibling.classList.toggle("exptextExt");
    } else {
      // 如果紧邻兄弟元素不存在（例如按钮在P标签内，内容在P标签外），
      // 可以尝试查找父元素的下一个兄弟元素
      // 这是一个更复杂的场景，需要根据实际HTML结构调整
      // 例如：(this.parentNode.nextElementSibling && this.parentNode.nextElementSibling.classList.toggle("exptextExt"));
    }


    // 根据按钮是否包含 "activeExt" 类来更新按钮文本
    this.textContent = this.classList.contains("activeExt") ? "Close Text" : "Read More";
  }

  // 遍历所有按钮，并为每个按钮添加点击事件监听器
  for (var i = 0; i < collExt.length; i++) {
    collExt[i].addEventListener("click", toggleContentAndText);
  }

}, {
  once: true
}); // { once: true } 确保事件只执行一次，避免重复监听

.ButtnExt {
  background-color: rgb(197, 195, 195);
  padding: 0 20px;
  border: none;
  border-radius: 3px;
  font-weight: 500;
  cursor: pointer; /* 增加光标样式，提升用户体验 */
}

.activeExt {
  border: none;
  background-color: greenyellow;
}

/* 默认隐藏内容，通过移除此class来显示 */
.exptextExt {
  display: none;
  overflow: hidden;
}

<h1>Button Test</h1>

<p>
  Initial text for the first section.
</p>
<button type="button" class="ButtnExt">Read More</button>
<div class="exptextExt">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates amet alias, nihil aliquid dolorem quae impedit, reiciendis architecto porro laborum assumenda omnis. Quo magni at officia! Voluptates ex quaerat iste?
  </p>
  <p>
    More content for the first button.
  </p>
</div>

<p>
  Initial text for the second section.
</p>
<button type="button" class="ButtnExt">Read More</button>
<div class="exptextExt">
  <p>
    This is the content that expands for the second button.
  </p>
  <p>
    Even more content here.
  </p>
</div>

<p>
  Initial text for the third section.
</p>
<button type="button" class="ButtnExt">Read More</button>
<div class="exptextExt">
  <p>
    And here is the content for the third button.
  </p>
</div>