如何用JavaScript按class隐藏li元素并实现显示/隐藏切换

我来帮你搞定这个问题！你之前的代码只处理了第一个.ans元素，是因为getElementsByClassName返回的是类数组集合，得遍历所有元素才能批量操作；另外直接改display属性没法做过渡效果，咱们用CSS配合JS来实现平滑的动画。

下面是完整的实现方案：

1. 保持你的HTML结构不变 #

<ul>
  <li class="one">Lorem ipsum dolor sit amet.</li>
  <li class="ans">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum?</li>
  <hr>
  <li class="two">Lorem, ipsum.</li>
  <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
  <hr>
  <li class="three">Lorem ipsum dolor sit.</li>
  <li class="ans">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
</ul>
<div class="btn" style="text-align: center;">
  <button class="green" type="button">Show Answer</button>
  <button class="red" type="button">Hide Answer</button>
</div>

2. 添加CSS实现过渡效果 #

.ans {
  /* 初始可见状态，设置过渡属性 */
  opacity: 1;
  max-height: 200px; /* 设一个足够容纳内容的高度值 */
  transition: all 0.3s ease; /* 0.3秒平滑过渡动画 */
  overflow: hidden; /* 防止内容溢出 */
  margin: 8px 0; /* 可选：给答案加一点上下边距 */
}

.ans.hidden {
  /* 隐藏状态：透明+高度收缩 */
  opacity: 0;
  max-height: 0;
  margin: 0; /* 隐藏时去掉边距，过渡更自然 */
}

这里用max-height而非height是因为height: auto无法实现过渡，max-height可以模拟内容高度的变化，配合opacity实现淡入淡出+收缩的双重过渡效果。

3. 原生JavaScript代码（批量操作+显示/隐藏逻辑） #

// 获取按钮和所有答案元素
const showBtn = document.querySelector('.green');
const hideBtn = document.querySelector('.red');
const answerItems = document.querySelectorAll('.ans');

// 隐藏所有答案的函数
function hideAnswers() {
  answerItems.forEach(item => {
    item.classList.add('hidden');
  });
}

// 显示所有答案的函数
function showAnswers() {
  answerItems.forEach(item => {
    item.classList.remove('hidden');
  });
}

// 绑定点击事件
hideBtn.addEventListener('click', hideAnswers);
showBtn.addEventListener('click', showAnswers);

代码细节说明： #

• 用document.querySelectorAll('.ans')获取所有答案元素，它返回的NodeList可以直接用forEach遍历，比getElementsByClassName更省心（后者返回的HTMLCollection需要转数组才能用forEach）
• 通过添加/移除CSS类来控制显示隐藏，而非直接修改元素样式，既符合样式与逻辑分离的原则，也让过渡效果更容易维护
• 过渡效果完全由CSS控制，JS只负责切换类，性能更优

可选优化：按钮状态联动 #

如果想避免用户重复点击无效按钮，可以加个状态控制：

// 初始化：禁用Show按钮（因为初始答案是显示的）
showBtn.disabled = true;

function hideAnswers() {
  answerItems.forEach(item => item.classList.add('hidden'));
  showBtn.disabled = false;
  hideBtn.disabled = true;
}

function showAnswers() {
  answerItems.forEach(item => item.classList.remove('hidden'));
  showBtn.disabled = true;
  hideBtn.disabled = false;
}

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