求助：实现问答卡片答案显隐切换与按钮文本切换功能

修正后的完整代码 #

HTML #

<div class="quiz-card">
  <h3>问题：什么是HTML？</h3>
  <button id="toggleAnswerBtn">Show Answer</button>
  <ul id="answerList" class="hidden"></ul>
</div>

CSS #

.hidden {
  display: none;
}

.quiz-card {
  margin: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

button {
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript #

const toggleBtn = document.getElementById('toggleAnswerBtn');
const answerList = document.getElementById('answerList');
// 可根据需求替换为实际答案内容
const answerContent = [
  '超文本标记语言（HyperText Markup Language）',
  '用于创建网页的标准标记语言',
  '使用标签描述网页结构'
];

toggleBtn.addEventListener('click', function() {
  const isHidden = answerList.classList.contains('hidden');
  
  if (isHidden) {
    // 首次点击时插入答案，避免重复添加
    if (!answerList.innerHTML) {
      answerContent.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        answerList.appendChild(li);
      });
      // 也可以用innerHTML批量插入：
      // answerList.innerHTML = answerContent.map(item => `<li>${item}</li>`).join('');
    }
    answerList.classList.remove('hidden');
    toggleBtn.textContent = 'Hide Answer';
  } else {
    answerList.classList.add('hidden');
    toggleBtn.textContent = 'Show Answer';
  }
});

关键修复点 #

• 初始状态控制：给答案容器默认添加hidden类，确保页面加载时答案处于隐藏状态，避免首次点击后状态混乱
• 避免重复插入：判断容器是否已有内容，仅在首次点击时插入答案，防止重复添加导致的内容冗余
• 状态判断准确性：通过classList.contains('hidden')精准判断当前显示状态，替代可能的错误状态判断逻辑
• 按钮文本同步：严格对应显示/隐藏状态切换按钮文本，避免逻辑颠倒导致的文本与功能不符

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