原生css点击侧边栏展开折叠效果的实现

可以使用纯CSS实现点击侧边栏展开折叠效果。具体实现方式如下：

1. HTML结构：侧边栏和内容区域分别使用两个div包裹，使用input[type="checkbox"]作为控制侧边栏折叠的开关。

<div class="sidebar">
  <ul>
    <li>菜单项1</li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

<div class="content">
  <label for="menu-toggle">菜单</label>
  <input type="checkbox" id="menu-toggle">
  <div class="page-content">
    <!-- 页面内容 -->
  </div>
</div>

2. CSS样式：使用伪类选择器:checked设置侧边栏展开和折叠的样式。

/* 隐藏checkbox */
input[type="checkbox"] {
  display: none;
}

/* 侧边栏样式 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #f2f2f2;
  transition: all 0.3s ease-in-out;
  transform: translateX(-220px);
}

/* checkbox:checked时，侧边栏展开 */
input[type="checkbox"]:checked ~ .sidebar {
  transform: translateX(0);
}

/* 内容区域样式 */
.content {
  position: relative;
  margin-left: 200px;
}

/* 菜单开关样式 */
label[for="menu-toggle"] {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f2f2f2;
  cursor: pointer;
  z-index: 1;
}

/* 内容区域样式 */
.page-content {
  padding: 20px;
}

这样就可以实现点击菜单开关时，侧边栏展开和折叠的效果。