寻求Toggle开关切换Div显示/隐藏的解决方案（固定HTML结构）

问题分析 #

你提供的ChatGPT方案失效的核心原因：CSS的~通用兄弟选择器仅能选中同一父级下、当前元素之后的兄弟元素。但你的toggle开关嵌套在#c的多层子容器中，和目标内容div（#content-one、#content-two）不属于同一层级，因此纯CSS选择器无法建立关联，必须借助JavaScript实现交互逻辑。

解决方案 #

通过JavaScript监听toggle开关的状态变化，动态修改两个内容div的display属性：

完整代码 #

CSS（保留原有样式）

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; }
  input[type="checkbox"]:focus {
    outline: 0; }

.toggle {
  height: 32px;
  width: 52px;
  border-radius: 16px;
  display: inline-block;
  position: relative;
  margin: 0;
  border: 2px solid #474755;
  background: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
  transition: all .2s ease; }
  .toggle:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
    transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35); }
  .toggle:checked {
    border-color: #654FEC; }
    .toggle:checked:after {
      transform: translatex(20px); }

/* 默认显示content-one，隐藏content-two */
#content-two {
  display: none;
}

HTML（保持原结构不可修改）

<div id="a">...</div>
<div id="b">...</div>
<div id="c">
  <div>
    <div>
      <input type="checkbox" class="toggle" checked>
    </div>
  </div>
</div>
<div id="d">...</div>
<div id="content-one">Content one</div>
<div id="content-two">Content two</div>
<div id="e">...</div>

JavaScript（核心交互逻辑）

// 获取目标元素
const toggle = document.querySelector('.toggle');
const contentOne = document.getElementById('content-one');
const contentTwo = document.getElementById('content-two');

// 初始化页面加载时的显示状态
if (!toggle.checked) {
  contentOne.style.display = 'none';
  contentTwo.style.display = 'block';
}

// 监听开关状态变化
toggle.addEventListener('change', function() {
  if (this.checked) {
    contentOne.style.display = 'block';
    contentTwo.style.display = 'none';
  } else {
    contentOne.style.display = 'none';
    contentTwo.style.display = 'block';
  }
});

代码说明 #

• 初始状态：根据toggle默认的checked属性设置内容显示状态，确保页面加载时显示正确内容
• 事件监听：开关状态改变时，切换两个内容div的display属性，实现显示/隐藏切换
• 兼容性：兼容所有现代浏览器，无需额外依赖

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