Javascript 打开或关闭网页上的部分？

在上，向下滚动几次以显示平铺。单击将显示两个部分的任何平铺

一个从右侧，另一个从左侧，并覆盖登录页

单击右侧的“关闭”按钮可以退出这两个部分

如何实现类似的区段开合效果？

$document.on'click'，'box div'，function e{ $'body'.addClass'show-menus'； }; $document.on'click'，'s.close'，函数E{ $'body'。删除类'show-menus'； }; 盒子部{ 显示：内联块； 宽度：20%；衬垫底部：20%； 背景：红色； 光标：指针； } 盒子分区：第n个孩子{ 背景：蓝色； } 盒子分区：悬停{ 不透明度：0.5； } .左，.右{ 过渡：600毫秒易进易出转换； 位置：固定；顶部：0；高度：100vh； } .左{ 背景：绿色；宽度：60%； 左：0； 转换：translate3d-100%，0,0； } .对{ 背景：紫色；宽度：40%； 右：0； 变换：translate3d100%，0,0； } .显示菜单.左，.显示菜单.右{ 变换：translate3d0,0,0； } .对，关上{ 位置：绝对位置； 顶部：10px；右侧：0； 光标：指针； }

---

哇。。谢谢你的快速回复。我将很快将其集成到我的页面中：