如何实现仅同时显示一个.box元素的内部内容？

核心问题修正 #

你提到的id='selected'触发所有盒子的问题，本质是ID在HTML中是全局唯一标识，多个元素共用同一个ID会导致选择器仅识别第一个匹配元素，或批量操作时误触所有元素。直接把ID改成类（比如class="selected-content"），再通过当前点击的盒子定位内部元素，就能精准操作单个盒子的内容。

实现步骤 #

1. 拆分内容容器：把盒子内的内容分成两部分——默认内容（点击显示、离开隐藏）和新增选项（永久保留），避免隐藏时误删新增内容。
2. 绑定单盒事件：用forEach给每个.box绑定点击、鼠标离开事件，通过this指代当前操作的盒子，确保只影响被点击的那个。
3. 精准定位元素：用this.querySelector('.类名')查找当前盒子内的内容容器，不会干扰其他盒子。

完整代码示例 #

HTML结构

<!-- 多个.box容器 -->
<div class="box">
  <!-- 默认内容：点击显示、离开隐藏 -->
  <div class="default-content" style="display: none;">
    盒子A的内部默认内容
  </div>
  <!-- 新增选项容器：永久显示 -->
  <div class="added-options"></div>
</div>

<div class="box">
  <div class="default-content" style="display: none;">
    盒子B的内部默认内容
  </div>
  <div class="added-options"></div>
</div>

JavaScript代码

// 选中所有.box元素
const allBoxes = document.querySelectorAll('.box');

allBoxes.forEach(box => {
  // 点击事件：标记选中状态+显示当前盒子的默认内容
  box.addEventListener('click', function() {
    // 重置所有盒子的边框（可选：仅让当前选中的盒子有标记）
    allBoxes.forEach(item => item.style.border = '1px solid #ccc');
    // 设置当前盒子的选中边框（你已实现的功能，此处为示例）
    this.style.border = '2px solid #2196F3';
    
    // 显示当前盒子的默认内容
    const defaultContent = this.querySelector('.default-content');
    defaultContent.style.display = 'block';
  });

  // 鼠标离开事件：隐藏默认内容，保留新增选项
  box.addEventListener('mouseleave', function() {
    const defaultContent = this.querySelector('.default-content');
    defaultContent.style.display = 'none';
  });

  // 示例：添加新选项的功能（点击按钮新增，不会被隐藏）
  const addOptionBtn = document.createElement('button');
  addOptionBtn.textContent = '添加新选项';
  addOptionBtn.addEventListener('click', (e) => {
    // 阻止冒泡，避免触发盒子的点击事件
    e.stopPropagation();
    const newOption = document.createElement('div');
    newOption.textContent = `新选项${Date.now()}`;
    this.querySelector('.added-options').appendChild(newOption);
  });
  box.appendChild(addOptionBtn);
});

关键细节说明 #

• 放弃全局ID，改用类选择器+相对定位，确保每个盒子的操作独立不干扰。
• 拆分内容容器后，鼠标离开仅隐藏默认内容，新增选项始终保留显示。
• 用this指代当前点击的盒子，从根源避免操作所有盒子的问题。

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