如何在所属.section完全展开时隐藏.demo-box并显示同层级.demo-box2

你现有代码不生效的核心原因是：demoBox1、demoBox2是通过Array.from(document.querySelectorAll())得到的数组集合，数组本身不存在style属性，直接对数组设置display样式不会作用到内部的DOM元素上。

利用你代码中已经给展开的section添加的is-expanded类做样式匹配即可：

/* 默认状态：显示demo-box，隐藏demo-box2 */
.demo-box2 {
  display: none;
}
/* 展开状态：隐藏当前展开区块的demo-box，显示demo-box2 */
.section.is-expanded .demo-box {
  display: none;
}
.section.is-expanded .demo-box2 {
  display: block;
}

如果需要用JS控制显示状态，修改_openSection和_closeSection方法，只操作当前被操作section内的对应元素即可（原来全局声明的demoBox1、demoBox2可以直接删除）：

function _openSection(element) {
  if (!element.classList.contains(expandedClass)) {
    element.classList.add(expandedClass);
    wrapper.classList.add(hasExpandedClass);
    // 只操作当前展开区块内的两个盒子
    const curDemoBox1 = element.querySelector('.demo-box');
    const curDemoBox2 = element.querySelector('.demo-box2');
    curDemoBox1.style.display = "none";
    curDemoBox2.style.display = "block";
  }
}

function _closeSection(element) {
  if (element.classList.contains(expandedClass)) {
    element.classList.remove(expandedClass);
    wrapper.classList.remove(hasExpandedClass);
    // 只操作当前关闭区块内的两个盒子
    const curDemoBox1 = element.querySelector('.demo-box');
    const curDemoBox2 = element.querySelector('.demo-box2');
    curDemoBox1.style.display = "block";
    curDemoBox2.style.display = "none";
  }
}

如果你的需求是展开任意一个section时，隐藏所有区块的demo-box、显示所有区块的demo-box2，则可以直接对原数组做遍历操作：

// 展开时替换原有的demoBox1.style、demoBox2.style赋值逻辑
demoBox1.forEach(box => box.style.display = "none");
demoBox2.forEach(box => box.style.display = "block");

// 关闭时替换原有的demoBox1.style、demoBox2.style赋值逻辑
demoBox1.forEach(box => box.style.display = "block");
demoBox2.forEach(box => box.style.display = "none");

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