如何点击列表所属容器块实现列表项的展开与收起切换？

方案思路 #

通过CSS控制列表显隐状态，JS监听头部点击事件切换父容器状态类即可实现，代码侵入性低，还可自定义过渡动画提升交互体验。 #

步骤1：添加CSS样式 #

/* 头部添加可点击提示 */
.recent-box__head {
  padding: 12px 16px;
  background: #f5f5f5;
  cursor: pointer;
}
/* 列表默认收起 */
.recent-box__list {
  margin: 0;
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  /* 加入顺滑展开动画 */
  transition: max-height 0.3s ease;
}
/* 父容器激活时列表展开，max-height取值只要大于列表最大可能高度即可 */
.recent-box.active .recent-box__list {
  max-height: 600px;
  padding-block: 8px;
}

步骤2：添加JS交互逻辑 #

// 绑定所有列表头部的点击事件
document.querySelectorAll('.recent-box__head').forEach(head => {
  head.addEventListener('click', function () {
    // 切换当前容器的激活状态
    this.closest('.recent-box').classList.toggle('active')
  })
})

可选配置 #

• 若需要默认展开，直接给对应.recent-box元素加active类即可
• 可自行修改CSS里的背景、内边距、动画时长等参数匹配项目设计风格

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