如何实现点击按钮切换其后续同级元素的显示与隐藏？

需求 #

• 页面加载时：隐藏Read More按钮之后的所有内容，同时隐藏Read Less按钮
• 点击Read More：隐藏自身，显示后续所有内容，显示Read Less按钮
• 点击Read Less：隐藏自身，隐藏后续内容，显示Read More按钮
• 必须基于已编写的getSiblings函数完成实现

完整代码实现 #

HTML（修正结构问题） #

<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="et_pb_button_0_wrapper">
    <button id="read-more">READ MORE</button>
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>
  <div class="content-to-toggle">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, ex.
  </div>

  <div class="read-less-wrapper">
    <button id="read-less">READ LESS</button>
  </div>
</body>

CSS（初始状态控制） #

/* 初始隐藏需要切换的内容和Read Less按钮 */
.content-to-toggle {
  display: none;
}
.read-less-wrapper {
  display: none;
}

JavaScript（基于现有函数实现逻辑） #

const readMore = document.getElementById("read-more");
const readLess = document.getElementById("read-less");
const readMoreWrapper = readMore.parentNode;
const readLessWrapper = readLess.parentNode;

var getSiblings = function(elem) {
  // Setup siblings array and get the parent
  var siblings = [];
  var sibling = elem.parentNode.firstChild;

  // Loop through each sibling and push to the array
  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== elem) {
      siblings.push(sibling);
    }
    sibling = sibling.nextSibling;
  }

  return siblings;
};

// 获取Read More容器的所有同级元素
const allSiblings = getSiblings(readMoreWrapper);

// 筛选出Read More之后的内容元素（排除Read Less容器）
const contentAfterReadMore = allSiblings.filter(sibling => {
  const parentChildren = Array.from(readMoreWrapper.parentNode.children);
  const readMoreIndex = parentChildren.indexOf(readMoreWrapper);
  const siblingIndex = parentChildren.indexOf(sibling);
  // 只保留位置在Read More之后且不是Read Less容器的元素
  return siblingIndex > readMoreIndex && sibling !== readLessWrapper;
});

// Read More点击事件
readMore.addEventListener("click", () => {
  readMoreWrapper.style.display = "none";
  // 显示所有后续内容
  contentAfterReadMore.forEach(el => el.style.display = "block");
  readLessWrapper.style.display = "block";
});

// Read Less点击事件
readLess.addEventListener("click", () => {
  readMoreWrapper.style.display = "block";
  // 隐藏所有后续内容
  contentAfterReadMore.forEach(el => el.style.display = "none");
  readLessWrapper.style.display = "none";
});

关键逻辑说明 #

1. 利用getSiblings函数获取Read More按钮容器的所有同级元素
2. 通过元素在父节点中的位置索引，筛选出Read More之后的内容元素
3. 点击事件中直接操作目标元素的display属性，完成显示/隐藏切换

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