HTML/CSS/JS中点击单张卡片多张同时展开的问题求助

问题现象 #

制作了包含多张博物馆展品卡片的网页，预期点击单张卡片时仅该卡片展开显示额外信息（描述和按钮），其余保持收起状态。但实际出现以下问题：

• 点击一张卡片时，两张卡片会同时展开
• 未激活的卡片不显示描述文本和按钮
• 尝试用alert()排查错误，但无论放在何处都无法触发

问题代码 #

HTML #

<div id="museum-container">
  <!-- Museum 1: Harmony Through Time -->
  <div class="museum-card" onclick="toggleMuseum(this)">
    <img src="music_museum.jpg" alt="Harmony Through Time" class="museum-image">
    <div class="museum-name">harmony through time</div>
    <div class="museum-description">Explore the evolution of music through the ages.</div>
    <button class="start-button" onclick="startMuseum('harmony through time')">Start</button>
  </div>

  <!-- Museum 2: Time Capsule -->
  <div class="museum-card" onclick="toggleMuseum(this)">
    <img src="time_capsule.jpg" alt="time capsule" class="museum-image">
    <div class="museum-name">time capsule</div>
    <div class="museum-description">Embark on a journey through historical artifacts and moments.</div>
    <button class="start-button" onclick="startMuseum('time capsule')">Start</button>
  </div>
</div>

JavaScript #

function toggleMuseum(card) {
    var isActive = card.classList.contains('active');
  
    // Remove active class from all cards
    document.querySelectorAll('.museum-card').forEach(function (element) {
      element.classList.remove('active');
    });
  
    // Toggle active class only on the clicked card
    if (!isActive) {
      card.classList.add('active');
    }
}

CSS #

.museum-card.active .museum-description,
.museum-card.active .start-button {
  display: block;
}

.active {
  background-color:rgb(177, 134, 70);
}

问题根源 #

1. 事件冒泡冲突：点击卡片内的按钮时，事件会冒泡到父级.museum-card，导致toggleMuseum被额外触发，干扰卡片状态切换逻辑。
2. 默认样式缺失：未设置.museum-description和.start-button的默认隐藏样式，导致未激活卡片的内容显示逻辑异常。
3. 函数加载时机问题：如果JavaScript代码放在HTML头部（<head>标签内），DOM未完全加载时函数无法被正确调用，导致alert()无法触发。

修复方案 #

1. 调整JS加载位置 #

将JavaScript代码放在HTML文档的底部（</body>标签前），确保DOM加载完成后函数能被正常调用：

<!-- 其他HTML内容 -->
<script>
function toggleMuseum(card) {
    var isActive = card.classList.contains('active');
  
    // Remove active class from all cards
    document.querySelectorAll('.museum-card').forEach(function (element) {
      element.classList.remove('active');
    });
  
    // Toggle active class only on the clicked card
    if (!isActive) {
      card.classList.add('active');
    }
}

function startMuseum(museumName) {
    // 阻止事件冒泡，避免触发父级卡片的点击逻辑
    event.stopPropagation();
    // 保留你的原有业务逻辑，比如跳转到对应页面等
}
</script>
</body>

2. 阻止按钮事件冒泡 #

修改按钮的onclick属性，直接添加事件阻止冒泡：

<button class="start-button" onclick="startMuseum('harmony through time'); event.stopPropagation();">Start</button>
<!-- 另一张卡片的按钮同理 -->
<button class="start-button" onclick="startMuseum('time capsule'); event.stopPropagation();">Start</button>

3. 补充默认CSS样式 #

添加默认隐藏规则，确保未激活卡片的描述和按钮不显示：

/* 默认隐藏描述和按钮 */
.museum-description, .start-button {
  display: none;
}

.museum-card.active .museum-description,
.museum-card.active .start-button {
  display: block;
}

/* 给active类加上卡片前缀，避免全局样式冲突 */
.museum-card.active {
  background-color:rgb(177, 134, 70);
}

4. 验证函数调用 #

在toggleMuseum函数开头添加alert()，确认函数是否被正常调用：

function toggleMuseum(card) {
    alert('卡片点击事件触发');
    var isActive = card.classList.contains('active');
    // 剩余逻辑...
}

修复后效果 #

• 点击卡片空白区域：仅当前卡片切换激活状态，展开/收起额外信息，其余卡片保持收起
• 点击卡片内的Start按钮：仅触发startMuseum函数，不会触发卡片的展开/收起逻辑
• 未激活卡片的描述和按钮默认隐藏，激活时正常显示

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