基于Checkbox的CSS显示/隐藏功能及JavaScript无法恢复默认图片问题求助

看起来你的折叠组件遇到了两个典型问题：收起后按钮无法切换回"More"，同时图片也没法恢复默认。我帮你分析下问题根源，再给出靠谱的修复方案：

先说说你原有代码的核心问题 #

1. 双重事件冲突：你同时用了<input type="checkbox">的原生label触发（点击label会自动切换checkbox状态）和JS监听img的点击事件，两者状态完全没同步——比如用户点击label的文字区域，checkbox状态变了但JS没触发，直接导致按钮状态混乱。
2. 逻辑判断彻底错误：你的JS里拿div.innerHTML和data-text-swap对比，但div里包含了<img>标签，innerHTML是一串带标签的字符串，和data-text-swap的"Hide"永远不相等，所以代码永远走else分支，根本没法触发恢复原图和文本的逻辑。
3. 元素操作混乱：你把按钮文本和图片放在同一个div里，直接改div的innerHTML会覆盖掉图片，进一步加剧状态错乱。

修复方案（两种可选） #

方案一：纯CSS+原生checkbox（推荐，无JS冲突）

这个方案利用checkbox的:checked伪类控制所有状态，完全不需要额外JS，状态绝对同步：

<nav class="drop-down-menu"> 
  <!-- 隐藏原生checkbox，用label触发 -->
  <input type="checkbox" class="activate" id="accordion-1" name="accordion-1" style="display: none;">
  <!-- 下拉内容，默认隐藏 -->
  <div class="drop-down"> 
    <p class="one-edge-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit. Nunc faucibus odio. Vestibulum neque Lorem ipsum dolor sit amet.</p>
  </div> 
  <!-- 触发用的label，关联checkbox -->
  <label for="accordion-1" class="menu-title">
    <div class="inside-label-div"> 
      <img id="img-toggle" src="https://i.imgur.com/Z87qmf6.png">
      <!-- 单独抽离按钮文本，方便控制 -->
      <span class="toggle-text">More</span>
    </div> 
    <p class="inside-label-para">The Product includes not only all much can be data to sort. Does not include numbers or other pole sidewalk.</p> 
  </label> 
</nav>

/* 默认隐藏下拉内容 */
.drop-down {
  display: none;
  margin-top: 10px; /* 加个间距更美观 */
}

/* checkbox选中时显示下拉内容 */
.activate:checked ~ .drop-down {
  display: block;
}

/* 选中状态下切换图片 */
.activate:checked ~ .menu-title #img-toggle {
  content: url('https://i.imgur.com/95cB2LZ.png');
}

/* 选中状态下切换按钮文本 */
.activate:checked ~ .menu-title .toggle-text {
  content: "Hide";
}

/* 给按钮容器加光标提示可点击 */
.inside-label-div {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px; /* 图片和文本间加个小间隙 */
}

方案二：JS监听checkbox状态（适合需要额外逻辑的场景）

如果一定要用JS控制，应该监听checkbox的change事件，保证状态和checkbox完全同步：

<nav class="drop-down-menu"> 
  <input type="checkbox" class="activate" id="accordion-1" name="accordion-1" style="display: none;">
  <div class="drop-down"> 
    <p class="one-edge-shadow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit. Nunc faucibus odio. Vestibulum neque Lorem ipsum dolor sit amet.</p>
  </div> 
  <label for="accordion-1" class="menu-title">
    <div class="inside-label-div"> 
      <img id="img-toggle" src="https://i.imgur.com/Z87qmf6.png">
      <span id="toggle-text">More</span>
    </div> 
    <p class="inside-label-para">The Product includes not only all much can be data to sort. Does not include numbers or other pole sidewalk.</p> 
  </label> 
</nav>

// 获取关键元素
const accordionCheckbox = document.getElementById('accordion-1');
const toggleImg = document.getElementById('img-toggle');
const toggleText = document.getElementById('toggle-text');

// 监听checkbox状态变化
accordionCheckbox.addEventListener('change', function() {
  if (this.checked) {
    // 展开状态：切换为隐藏按钮和对应图片
    toggleText.textContent = 'Hide';
    toggleImg.src = 'https://i.imgur.com/95cB2LZ.png';
  } else {
    // 收起状态：恢复为更多按钮和默认图片
    toggleText.textContent = 'More';
    toggleImg.src = 'https://i.imgur.com/Z87qmf6.png';
  }
});

// 初始化确保状态正确
toggleText.textContent = 'More';
toggleImg.src = 'https://i.imgur.com/Z87qmf6.png';

这两个方案都能完美解决你的问题：点击时正常展开/隐藏文本，收起后按钮会变回"More"，图片也能恢复默认，而且状态完全同步，不会出现卡死的情况。

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