如何用Vanilla JavaScript实现父元素点击切换子元素类及加载动画

直接上完整可运行的实现代码，你可以直接套用或对照排查问题：

HTML 结构 #

<div class="parent-btn">点击显示/隐藏子元素</div>
<div class="child-element">
  <div class="loading-spinner"></div>
  <p>这是子元素的内容</p>
</div>

CSS 样式 #

/* 默认隐藏子元素 */
.child-element {
  display: none;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
  position: relative;
  cursor: pointer;
}

/* show类控制子元素显示 */
.child-element.show {
  display: block;
}

/* 加载动画样式 */
.loading-spinner {
  display: none;
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 加载状态时：显示动画，隐藏原有内容 */
.child-element.loading .loading-spinner {
  display: block;
}
.child-element.loading p {
  visibility: hidden;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

JavaScript 逻辑 #

const parentBtn = document.querySelector('.parent-btn');
const childElement = document.querySelector('.child-element');

// 父按钮点击：切换子元素的显示/隐藏状态
parentBtn.addEventListener('click', () => {
  childElement.classList.toggle('show');
  // 显示子元素时，确保移除加载状态类
  if (childElement.classList.contains('show')) {
    childElement.classList.remove('loading');
  }
});

// 子元素点击：触发加载动画，延迟后回到隐藏状态
childElement.addEventListener('click', (e) => {
  // 阻止事件冒泡，避免触发父按钮的点击事件（这是很多人忽略的关键）
  e.stopPropagation();
  
  // 添加加载类，显示动画
  childElement.classList.add('loading');
  
  // 3秒后移除所有状态类，回到初始隐藏状态（时间可自行调整）
  setTimeout(() => {
    childElement.classList.remove('show', 'loading');
  }, 3000);
});

问题排查关键点 #

如果你的加载动画之前不工作，大概率是以下原因：

• 没处理事件冒泡：点击子元素时会触发父元素的点击事件，导致状态反复切换，必须用e.stopPropagation()阻断。
• 加载状态的类管理混乱：显示子元素时没有清除之前的加载类，导致样式冲突。
• 加载动画的CSS选择器错误：没有正确关联加载状态类和动画元素的显示逻辑。

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