Html 在手机上使用overflow-x时，我的菜单消失

我有一个

菜单

，它位于一个div内，我将其隐藏在屏幕外。按下

菜单按钮

时，我将

菜单

带入视图。在执行此操作时，我将身体的可见内容移到一侧，为

菜单

留出空间

当我最初这样做时，我放置了

overflow-x:hidden在正文中，它在桌面上工作得非常好。当我将网站加载到手机上时，我注意到手机的行为不一样——它试图显示
菜单和屏幕上的所有内容

我读了一点，它说移动浏览器在放入html或body标记时会忽略溢出-x，应该创建一个包装div

当我做这个编辑时，我的
菜单消失了。当我单击
菜单按钮时，内容会在
菜单中移动，但不会出现。
这是怎么回事？我不太明白为什么
菜单会消失。我怎样才能解决这个问题

我做的包装是


#body#u包装器{
溢出x：隐藏；
}

我的导航栏。。。
我的菜单。。。
我的内容。。。
所以我解决了我的问题！呐喊
最初，我在Jquery中使用
.animate（）
来制作菜单动画。菜单将隐藏在屏幕外，使用动画功能，我将“缓慢”（285px，0.3s）将菜单移动到屏幕上的适当位置。虽然这对于我放置
overflow-x:hidden的桌面浏览器来说效果非常好输入到
主体的CSS中
。移动浏览器忽略
overflow-x：隐藏放置在
主体中时

在四处阅读时，我多次看到关于放置
overflow-x:hidden输入到正文内容的包装器中。即内容。虽然它确实阻止了一个滚动条弹出x轴和内容被缩小，它搞砸了我的菜单-我的菜单消失了。无论出于何种原因，将
溢出-z:隐藏与Jquery动画函数不一致。我试着把菜单放在包装外面，但还是没有成功。我还试着玩了
overflow-x:hidden插入到包装器和正文中，但没有成功

好吧，是时候换一个新策略了，因为我花了太长时间玩我的菜单，以至于不能把它扔掉

我的解决方案
我现在把菜单放在包装器外面，所以我决定保持
overflow-x:hidden。也许有点过头了，但至少我知道不管使用什么浏览器，它都能正常工作。也许在将来，我会有一点不高兴把菜单放回包装器中，只隐藏
overflow-x:hidden并查看它是否仍然有效。（我有点不喜欢把很多做相同/相似工作的东西分散在各处，感觉有点凌乱。）

菜单现在有三个关联的类<代码>菜单
，
菜单隐藏
和
菜单显示
<代码>菜单
包含我所有的CSS格式。我使用
菜单\u hide
和
菜单\u show
类来隐藏和显示菜单

菜单的默认HTML如下所示。注意，它有两个类

<div class="menu menu_hide">

我的JS看起来像这样。请注意，每次单击菜单按钮时，我都会在显示和隐藏类的菜单之间切换

$('.icon-menu').click(function() {
     $('.menu').toggleClass( "menu_show menu_hide" );
});

$('.icon-menu').click(function() {
     $('.menu').toggleClass( "menu_show menu_hide" );
});