使用JavaScript实现题目答案隐藏功能遇多问题求助

咱们一步一步拆解你遇到的几个问题，逐个解决：

1. CSS样式失效的原因 #

看你CSS代码里的这行：

#myDIV, {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}

#myDIV后面多了个多余的逗号，这属于语法错误，浏览器会直接忽略整个样式规则，导致背景色等样式不生效。把逗号删掉就好了：

#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}

2. 只有第一个按钮工作的问题 #

你所有按钮都调用同一个myFunction()，但这个函数硬编码了只操作myDIV和btn1，其他按钮点击后自然找不到对应的元素。咱们可以把函数改成通用型的，有两种优雅的实现方式：

方式一：给函数传参数（简单直接） #

修改按钮的onclick事件，传入对应的答案元素ID，同时把点击的按钮本身也传进去：

<li>Question 1 <button onclick="toggleAnswer('myDIV', this)">Show Answer</button></li>
<div id="myDIV" style="display: none;"> Answer 1 </div>
<li>Question 2 <button onclick="toggleAnswer('myDIV2', this)">Show Answer</button></li>
<div id="myDIV2" style="display: none;"> Answer 2 </div>

对应的JS函数改成：

function toggleAnswer(answerId, button) {
  const answerElement = document.getElementById(answerId);
  if (answerElement.style.display === "block") {
    answerElement.style.display = "none";
    button.innerHTML = 'Show Answer';
  } else {
    answerElement.style.display = "block";
    button.innerHTML = 'Hide Answer';
  }
}

方式二：通过DOM结构关联（更优雅，无内联代码） #

如果不想在HTML里写内联的onclick，可以用类名统一绑定事件，通过DOM层级关系找到按钮对应的答案元素：

<ol>
  <li>Question 1 <button class="answer-btn">Show Answer</button></li>
  <div class="answer-content" style="display: none;"> Answer 1 </div>
  <li>Question 2 <button class="answer-btn">Show Answer</button></li>
  <div class="answer-content" style="display: none;"> Answer 2 </div>
</ol>

对应的JS代码：

// 给所有按钮绑定点击事件
document.querySelectorAll('.answer-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到按钮所在<li>的下一个兄弟元素（就是对应的答案div）
    const answerDiv = this.parentElement.nextElementSibling;
    if (answerDiv.style.display === 'block') {
      answerDiv.style.display = 'none';
      this.textContent = 'Show Answer';
    } else {
      answerDiv.style.display = 'block';
      this.textContent = 'Hide Answer';
    }
  });
});

这种方式HTML结构更干净，后续加新题目也不用改JS，直接复制结构就行。

3. JavaScript是不是最佳实现方式？ #

其实对于这种展开收起答案的需求，HTML5原生的<details>和<summary>标签就能完美实现，完全不用写JS和额外CSS，是最省心的方案：

<ol>
  <li>
    <details>
      <summary>Question 1</summary>
      <p style="margin-top:10px; padding:15px; background:lightblue;">Answer 1</p>
    </details>
  </li>
  <li>
    <details>
      <summary>Question 2</summary>
      <p style="margin-top:10px; padding:15px; background:lightblue;">Answer 2</p>
    </details>
  </li>
</ol>

点击<summary>里的问题就能展开/收起答案，浏览器自带交互逻辑，还可以通过CSS自定义箭头、背景等样式，非常适合你的场景。

完整修复后的代码示例（通用JS版本） #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.answer-content {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 10px;
}
.answer-btn {
  margin-left: 10px;
}
</style>
</head>
<body>
<ol>
  <li>Question 1 <button class="answer-btn">Show Answer</button></li>
  <div class="answer-content" style="display: none;"> Answer 1 </div>
  <li>Question 2 <button class="answer-btn">Show Answer</button></li>
  <div class="answer-content" style="display: none;"> Answer 2 </div>
</ol>
<script>
document.querySelectorAll('.answer-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const answerDiv = this.parentElement.nextElementSibling;
    if (answerDiv.style.display === 'block') {
      answerDiv.style.display = 'none';
      this.textContent = 'Show Answer';
    } else {
      answerDiv.style.display = 'block';
      this.textContent = 'Hide Answer';
    }
  });
});
</script>
</body>
</html>

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