javascript - 通过设置宽度在 Chrome for Android 中打开移动菜单仅在第一次有效。

Question

因此，我尝试让移动菜单在单击图标时从左侧滑出，并在您单击菜单外部后再次消失。像这样:
http://codepen.io/anon/pen/LzJuq (旧的，请参阅下面的新代码笔)

它在桌面和 Android 的默认浏览器中运行良好。

在我的手机上，在 Chrome 中，菜单只会在第一次打开。随后每次它在完成打开之前自行关闭。

我可以看到它尝试打开...所以我假设，因为#menu-icon 实际上在#content 中，它会尝试运行它们两者...但我不知道该怎么做。

编辑:所以我将其更改为仅手动设置宽度，而不是添加/删除指定宽度的类:http://codepen.io/anon/pen/Bmdny
菜单现在始终打开，但是菜单中的链接在随后打开时似乎是“透明的”。即，我看到菜单的空白背景，但里面/上面什么也没有，但我仍然可以单击链接。如果我放大，即使只是一点点，它似乎会强制浏览器重新绘制并显示菜单项。

在 Android 的默认浏览器中似乎一切正常，只是在 Chrome for Android 中不行。

我试过注释掉 css 转换，但没有效果。我试过给菜单项一个比菜单本身更高的 z-index(我很绝望，哈哈)，没有改变。

我只是不明白发生了什么。

谢谢。

信息:
安卓版 Chrome v32
安卓 4.3
三星 Galaxy Nexus

Answer 1

你在什么导航器上测试它？我无法在手机或平板电脑上重现错误。但是，当按钮位于 #content div 上方时，当您单击它时，您似乎同时单击了两个元素。

尝试仅在菜单包含该类时删除该类:

$("#content").bind( "click", function() {
    if ($('#mobile-menu').hasClass('open'))
       $('#mobile-menu').removeClass('open');
});

编辑

让我们尝试在菜单和内容之间放置一个中间层。让我们将菜单关闭事件绑定(bind)到这一层。

看看这个:http://codepen.io/anon/pen/jiyHI