关闭后退按钮上的菜单抽屉（Safari问题）

Question

当用户单击“后退”按钮时，我正在尝试关闭自定义菜单抽屉。 目前，这种设计缺陷是抽屉保持打开而不悬停的唯一方法。 希望只有悬停才能使抽屉保持打开状态。

详细说明：

1-将鼠标悬停在菜单上时，将打开一个抽屉。

2-单击菜单（或抽屉）中的链接从而离开页面时，抽屉将在您刚刚离开的页面上保持打开状态。

3-使用浏览器的“后退”按钮返回到刚刚离开的页面时，您会看到菜单抽屉处于打开状态。

4-关闭卡住的打开菜单抽屉的唯一方法是将鼠标悬停并离开。

我已经尝试了显而易见的方法，那就是利用“卸载”或“卸载前”事件。 这是行不通的，因为触发卸载时鼠标仍在悬停项目。 悬停时，抽屉保持打开状态，与此同时，卸载事件试图关闭。 （我从演示中删除了损坏的“卸载”功能。）

http://jsfiddle.net/sparky672/rNzPR/

具有外部链接的完整演示，因此可以测试后退按钮...

http://jsfiddle.net/sparky672/rNzPR/show/

无论如何，结果是一样的...单击“后退”按钮时，“上次使用”菜单抽屉处于打开状态，关闭它的唯一方法是再次“悬停并离开”它。

我对解决方法的建议很感兴趣，这样它就不会首先打开，或者至少不需要“输入/离开”序列即可将其关闭...以较简单的方法为准。

（演示仅在透明容器上包含边框，仅用于开发目的。实际系统并不难看。）

编辑：

• 我在Safari 4和5和Firefox 3中看到了这个问题

• 在Firefox 4和7中，会出现此问题，但是只要将鼠标移至窗口中的任何位置，菜单就会关闭。 （够好了）

• 我没有在IE 8，IE 9或Chrome中看到此问题。

似乎某些浏览器必须改进或更改有关jQuery $(document).ready的“缓存前/缓存后”的处理方式，因为不存在此问题的唯一方法是将后退按钮设置为新触发$(document).ready的代码。

由于这主要看起来只是一个Safari问题，所以也许我现在会忍受它。

Answer 1

如评论中所述，您应该可以将closeDrawer调用附加到抽屉链接的click事件上，从而覆盖行为。 就像是：

$('div[id|="menu"] a').click(function(){
  // first, close the drawer
  closeDrawer();
  // now just let it carry on with following the link
  // (don't try to return false or event.preventDefault)
});

或者，更简洁地说：

$('div[id|="menu"] a').click(closeDrawer);