Question

我正在尝试在用户点击后退按钮时关闭我的自定义菜单抽屉。现在，这种设计缺陷是抽屉在没有悬停的情况下保持打开的唯一方式。希望只有悬停才能打开抽屉。

诠：

1 - 当您将菜单悬停时，抽屉会打开。

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

3 - 当您使用浏览器的“后退”按钮返回刚刚离开的页面时，您将会这样做看到打开的菜单抽屉。

4 - 关闭卡住的打开菜单抽屉的唯一方法是悬停＆amp;离开吧。

我尝试过显而易见的事情，即利用“卸载”或“卸载前”事件。这不起作用，因为当触发卸载时鼠标仍然悬停在项目上。悬停时保持抽屉打开，同时卸载事件试图关闭。 （我从演示中删除了损坏的“卸载”功能。）

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

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

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

无论如何，结果是一样的...当点击后退按钮时，“上次使用”菜单抽屉被卡住打开，关闭它的唯一方法就是“再次悬停”它。

我对解决方法的建议很感兴趣，因此它不会在第一时间打开，或者至少不需要“输入/离开”序列来关闭它...无论哪个更简单

（该演示包含透明容器上的边框，仅用于开发目的。真正的系统并不那么难看。）

修改

我在Safari 4＆amp; 5，和Firefox 3
在Firefox 4和7中，会出现问题，但只要您将鼠标移动到窗口中的任何位置，菜单就会关闭。（足够好）
我没有在IE 8，IE 9或Chrome中看到这个问题。

似乎某些浏览器必须改进或改变它们处理关于jQuery $(document).ready的“之前/之后缓存”的方式，因为没有这个问题的唯一方法是使用后退按钮在$(document).ready。

中重新触发代码

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

Answer 1

正如评论中所提到的，您应该能够覆盖我附加closeDrawer调用抽屉链接的点击事件的行为。类似的东西：

$('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);

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

1 个答案: