jquery - 导航栏中的(右)幻灯片溢出主体问题

Question

我无法用我的代码解决问题。我正在研究一个右滑入式导航面板。但是，当面板从其事件状态触发到非事件状态时，主体会围绕 x 轴溢出。

这是我写的代码

$(document).ready(function(){
  $('.toggle').click(function(){
    $('.menu').toggleClass('active')
  })
})

body{
  margin:0;
  padding:0;  
  overflow-x: hidden; 
}
.menu, .toggle{
  position:absolute;
}
.menu{
  top:0;
  bottom:0;
  right:-300px;
  width:300px;
  background:green;
  transition:.22s;
}
.menu.active{
  right:0;
}
.toggle{
  top:0;
  left:0;
  width:50px;
  height:50px;
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<div class="toggle"></div>

代码笔:https://codepen.io/ayushgx/pen/mYgyJe

我已经在我的代码中尝试了 overflow-x: hidden 但似乎没有什么能正常工作。

我还找到了一支笔，他在他的代码中所做的一切我已经做过，但对我来说没有任何效果

这是笔: https://codepen.io/erikterwan/pen/grOZxx

不知道是不是漏了什么

由于代码在桌面浏览器中运行良好，但在移动浏览器中无法运行。 但在 erikterwan 的给定笔中，它非常适合移动和桌面

Answer 1

因为你的菜单和切换是绝对定位的，父容器必须包含position: relative:

.body{
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

请注意，我已将代码添加到代码笔中以确保菜单的高度符合预期:

https://codepen.io/anon/pen/NVmPzy

现在应该可以在移动设备上使用了。