如何实现点击按钮切换filters sidebar显示/隐藏的功能

这个需求完全可以实现，原生JS、各类前端框架都能很方便地完成开发，以下是具体实现逻辑和示例：

• 本质是通过控制侧边栏元素的CSS属性切换显示/隐藏状态，点击按钮时触发状态变更即可，还可以添加过渡动画提升交互体验
• 如果需要留存用户的使用习惯，可将侧边栏显隐状态存入localStorage，页面初始化时读取对应值设置初始状态

<!-- 切换按钮 -->
<button id="toggleFilterBtn">切换筛选侧边栏</button>
<!-- 筛选侧边栏 -->
<div id="filterSidebar" class="filter-sidebar">
  这里是筛选条件内容
</div>

<style>
.filter-sidebar {
  width: 280px;
  height: 100vh;
  background: #fff;
  position: fixed;
  left: 0;
  top: 0;
  transition: all 0.3s ease; /* 滑动过渡动画 */
}
/* 隐藏状态样式 */
.filter-sidebar--hidden {
  transform: translateX(-100%);
}
</style>

<script>
const toggleBtn = document.getElementById('toggleFilterBtn')
const filterSidebar = document.getElementById('filterSidebar')

toggleBtn.addEventListener('click', () => {
  // 切换侧边栏隐藏类
  filterSidebar.classList.toggle('filter-sidebar--hidden')
})
</script>

• Vue：用v-show绑定响应式变量控制显隐，按钮点击事件修改变量值即可
• React：用useState声明状态变量，按钮点击调用set方法修改变量，配合className动态绑定或者条件渲染控制侧边栏显隐
• 小程序/跨端框架：思路和上述框架一致，都是通过状态变量绑定视图的显隐属性

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