Javascript 通过设置宽度在Chrome for Android中打开移动菜单只在第一次起作用。

因此，我尝试让一个移动菜单在点击图标时从左边滑出，然后在点击菜单外后再次消失。像这样：
（旧的，请参见下面的新代码笔）

它在桌面和安卓的默认浏览器中都能正常工作

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

我可以看到它试图打开。。。所以我假设，因为#菜单图标实际上在#内容中，它会尝试同时运行它们。。。但我不知道该怎么办

编辑：因此我将其更改为仅手动设置宽度，而不是添加/删除指定宽度的类：
菜单现在一直打开，但是在后续打开时，菜单中的链接似乎是“透明的”。也就是说，我看到菜单的空白背景，但是没有任何内容，但是我仍然可以点击链接。如果我放大，哪怕只是一点点，它似乎会迫使浏览器重新绘制，并显示菜单项

在Android的默认浏览器中，一切似乎都很好，只是在Android的Chrome浏览器中没有

我试过注释css转换，但没有效果。我试着给菜单项一个比菜单本身更高的z索引（我很绝望，哈哈），没有改变

我只是不明白发生了什么

谢谢

信息：
Android v32的Chrome浏览器
安卓4.3

---

三星Galaxy Nexus

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

仅当菜单包含该类时，才尝试删除该类：

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

编辑

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

---

看看这个：

经过多次搜索、调整和拉扯，我开始将问题缩小到溢出：隐藏；在我的菜单上

我偶然发现了一些不同来源的帖子，这些帖子描述了一个与我类似的问题，而且总是有人认为它与溢出属性有关，但一开始我并不理解

我通过设置宽度“隐藏”菜单：0；，因此，为了隐藏内容，我必须设置overflow:hidden；。如果我把那行注释掉，菜单就会流畅而一致地打开，但当然：我可以一直看到菜单项。不是我想要的

我尝试转换显示属性，以了解您不能这样做。所以我尝试了visibility属性，起初也不起作用。然而，我遇到了一个试图转换显示属性的家伙，他正好为我工作

我仍然不明白这到底是为什么，我认为这与延迟第二次过渡有关，所以它不会停止第一次过渡他在回答中加入了链接

---

所以我想问题真的与Webkit和固定/绝对元素有关，其中包含ul。。。不重新油漆后，某些。。。锚定标签点击？还是过渡？是的，我还是不太明白。但它现在起作用了

你的建议不会有什么不同，因为我不担心删除一个不存在的类。我在安卓4.3上使用Chrome32。事实上，我只是在默认的Android浏览器上测试了它，效果很好。所以它只是Android的Chrome浏览器。我试着在一小段时间内“锁定”这个类，这样它就不能立即被移除；像这样：这没有什么区别。我已经编辑了解决方案。看一看。顺便说一句，我正在Android 4.1.2/Chrome 32上测试您的示例，两者都很好。您尝试过我最初的解决方案吗？我使用的是jQuery 2.0.3。我尝试改为1.11.0（无论如何，我并不打算在这个项目上使用2.x）。那没用。仅供参考。此外，我注意到，每当我改变缩放级别时，即使是最微小的一点，它都能工作。。。但这只是第一次。然后我再次放大或缩小，它再次工作，非常一致。我尝试更改代码，使其直接更改width属性，而不是更改类，然后在后续尝试中打开菜单，但是，菜单项不见了！我的意思是：他们第一次在那里；但是当我打开菜单之后，链接就不存在了。不过我仍然可以点击它们。如果我放大它们就会出现。因为问题实际上似乎与原始标题（提到jQuery）无关，所以我重写了标题和帖子。希望有人对这个问题有所了解。