HTML

• 在fo div中添加了data属性，以跟踪它是打开还是关闭
• 将内部按钮更改为span以删除屏幕上显示在关闭菜单按钮旁边的行
• 在按钮前添加关闭div标记，以将它们与菜单分开

<div id="fo" class="fo" data-active="false">
  <div style="background-color: #000; transform: translate(50%,30%); border-radius: 30px; height: 70%; width: 50%;">
    <span id="btn-close" style="border: 0; background-color: #000; margin-top: 2%; font-size: 3rem; color: white; float: right;">
      <span class="btn-form-close">&times;</span>
    </span>
  </div>
</div>
<button id="btnk" class="but-oferts">Otworz</button>
<button id="btnk1" class="but-oferts">Otworz</button>
<button id="btnk2" class="but-oferts">Otworz</button>
<button id="btnk3" class="but-oferts">Otworz</button>

CSS

• 使用id而不是class将fo div作为目标
• 使用transform和translateX将动画更改为过渡。用于决定向左或向右移动（850 px或-850px）的选择器取决于数据属性（例如#fo[data-active='false']）

#fo{
  z-index: 2;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  left: -850px;
  display: block;
  transition: transform 0.5s ease;
}
#fo[data-active='false'] {
  transform: translateX(-850px);
} 
#fo[data-active='true'] {
  transform: translateX(850px);
}
.btn-form-close {
    border: 0;
    font-size: 3rem;
    position: absolute;
    top: -2%;
    width: 0;
    height: 0;
    right: 10%;
    line-height: normal;
    cursor: pointer;
}

JS

• 将下面的代码组合成一个名为toggleMenu()的函数，这样就不会重复了
• 您不需要使用此方法切换类，以便删除
• 将当前打开状态存储在一个名为active的变量中，然后使用toggleMenu（）函数（三元运算符）将其设置为相反状态
• 对所有四个按钮使用此功能

let btn = document.getElementById('btn-close');
let fo = document.getElementById('fo');
let btnk = document.getElementById('btnk');
let btnk1 = document.getElementById('btnk1');
let btnk2 = document.getElementById('btnk2');
let btnk3 = document.getElementById('btnk3');

function toggleMenu() {
  const active = fo.dataset.active
  fo.dataset.active = active == 'true' ? 'false' : 'true'
}

btn.addEventListener('click',function(){
    toggleMenu()
});
btnk.addEventListener('click',function(){
    toggleMenu()
});
btnk1.addEventListener('click',function(){
    toggleMenu()
});
btnk2.addEventListener('click',function(){
    toggleMenu()
});
btnk3.addEventListener('click',function(){
    toggleMenu()
});