如何实现点击Footer__Title元素展开下方Linklist的手风琴折叠功能

基础CSS（控制展示状态与样式） #

先添加以下样式控制列表的显隐和点击提示：

/* 标题默认带手型，提示可点击 */
.Footer__Title.Heading.u-h6 {
  cursor: pointer;
  user-select: none;
}
/* 列表默认隐藏，可根据需求加媒体查询仅在移动端生效 */
.Footer__Block .Linklist {
  display: none;
}
/* 展开状态下显示列表 */
.Footer__Block.is-expand .Linklist {
  display: block;
}

如果需要加箭头状态提示，可以额外加这段CSS：

.Footer__Title {
  position: relative;
  padding-right: 20px;
}
.Footer__Title::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s all ease;
}
.Footer__Block.is-expand .Footer__Title::after {
  content: "−";
  transform: translateY(-50%) rotate(90deg);
}

原生JS交互逻辑（无第三方依赖） #

普通折叠效果（多个块可同时展开） #

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  // 获取所有页脚标题触发器
  const triggerList = document.querySelectorAll('.Footer__Title.Heading.u-h6');
  triggerList.forEach(trigger => {
    trigger.addEventListener('click', function () {
      // 切换当前块的展开状态
      this.closest('.Footer__Block').classList.toggle('is-expand');
    })
  })
})

手风琴效果（同一时间仅一个块展开） #

如果需要点击当前块时自动关闭其他已展开的块，用这段JS替换上面的即可：

document.addEventListener('DOMContentLoaded', function () {
  const triggerList = document.querySelectorAll('.Footer__Title.Heading.u-h6');
  triggerList.forEach(trigger => {
    trigger.addEventListener('click', function () {
      const currentBlock = this.closest('.Footer__Block');
      const isCurrentExpand = currentBlock.classList.contains('is-expand');
      // 关闭所有已展开的块
      document.querySelectorAll('.Footer__Block.is-expand').forEach(block => {
        block.classList.remove('is-expand');
      })
      // 切换当前块状态
      if (!isCurrentExpand) {
        currentBlock.classList.add('is-expand');
      }
    })
  })
})

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