Slideout菜单 - 隐藏水平滚动条，但在转换

Question

我试图创建一个滑出响应菜单，它的工作相当好（至少在Chrome中）。

虽然我遇到了一个问题。基本上，当你点击菜单按钮时，菜单将滑出，身体会向右移动（保持宽度），看起来很棒。当你滑回去时会出现问题 - jQuery删除隐藏水平滚动条的类，并导致滚动条在菜单滑出屏幕时闪烁。

类/ CSS隐藏滚动条是这样的：

.mob-menu-open { 
    margin-left: 260px; 
    height: 100%; 
    overflow: hidden; 
    } 

和jQuery的此位将删除类：

$('body').toggleClass('mob-menu-open'); 

我已经建立了一个的jsfiddle来说明问题：http://jsfiddle.net/tgxgT/

我试图创建一些可以重用的东西，所以我不想使用包装div，因为它不会总是存在。我曾想过一个问题，那就是使用jQuery来完成动画并在完成回调后删除类，但如果可能的话，我宁愿只坚持CSS。如果它不可行，那么我会沿着jQuery路线走。

有什么办法可以解决这个小问题吗？

真的很受欢迎！

Answer 1

我不认为你想玩的身体标签很多。

我会将包装器设置为#wrapper { overflow: hidden; }，然后将所有在指定宽度的div内移动的内容 （例如， .content {width: 100%;}只需移动.content div。

我玩过你的jsFiddle为例：http://jsfiddle.net/EfG2m/ 在那里，我放置了顶部的栏和菜单内的内容，因为他们随着div移动。如果您希望将它们固定在顶部，则可以将它们分别放置在外面并进行动画制作。

我希望这或多或少清楚...