Toggle功能异常：点击元素无法隐藏其他已显示内容求助

我明白你的需求：点击元素时要收起其他所有展开的内容，只保留当前点击项的内容，而且.totalpoll-choice-image-2的图片必须一直显示，点击它才会展示下方的隐藏描述。下面是具体的实现方案：

第一步：先明确HTML结构（参考示例） #

假设你的DOM结构大概是这样的（如果实际结构不同，只需调整选择器即可）：

<!-- 每个可点击项的容器 -->
<div class="toggle-container">
  <!-- 始终显示的图片 -->
  <img src="your-image-url.jpg" class="totalpoll-choice-image-2">
  <!-- 需要切换显示的描述内容 -->
  <div class="toggle-content">这是隐藏的描述内容，点击图片后显示</div>
</div>

<div class="toggle-container">
  <img src="another-image.jpg" class="totalpoll-choice-image-2">
  <div class="toggle-content">另一个隐藏的描述</div>
</div>

第二步：基础CSS设置 #

先给描述内容设置默认隐藏，同时确保图片始终显示：

/* 默认隐藏描述内容 */
.toggle-content {
  display: none;
  margin-top: 8px;
}

/* 确保图片始终可见，添加鼠标指针提示用户可点击 */
.totalpoll-choice-image-2 {
  display: block;
  cursor: pointer;
}

第三步：JavaScript实现核心逻辑 #

用原生JS就能搞定，不需要依赖jQuery：

// 获取所有需要切换的描述内容和触发点击的图片
const allContents = document.querySelectorAll('.toggle-content');
const triggerImages = document.querySelectorAll('.totalpoll-choice-image-2');

// 给每个图片绑定点击事件
triggerImages.forEach(image => {
  image.addEventListener('click', function() {
    // 1. 先隐藏所有已展开的描述内容，解决堆叠问题
    allContents.forEach(content => {
      content.style.display = 'none';
    });
    
    // 2. 找到当前图片对应的描述内容并显示它
    // 若你的DOM结构不是兄弟关系，可换成 this.closest('.toggle-container').querySelector('.toggle-content') 定位
    const targetContent = this.nextElementSibling;
    if (targetContent) {
      targetContent.style.display = 'block';
    }
  });
});

关键逻辑说明 #

• 全局收起：每次点击图片时，先遍历所有描述内容并隐藏，彻底避免堆叠显示的问题。
• 精准定位当前内容：通过nextElementSibling找到当前点击图片对应的描述（可根据实际DOM结构调整定位方式）。
• 图片常驻显示：CSS里明确设置.totalpoll-choice-image-2的display: block，确保它不会被任何逻辑隐藏。

如果你的实际DOM结构和示例不同，只需要调整JS里的选择器定位方式就可以适配啦！

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