Jquery .toggle()和浏览器的“后退”按钮

Question

我有一个相当简单的布局和一个非常奇怪的结果。

$(".main").on("hover", ".js_post", function () {
$(this).children('.js_del').toggle();
});

本质上，当用户将鼠标悬停在.js_post div上时，会切换.js_del div。下面是隐藏.js_del的css：

.js_del { display:none; }

现在，当光标悬停在.js_post上时，.js_del div会如预期的那样切换。但是，当用户单击.js_post目录中的链接，然后单击浏览器的后退按钮时，就会发生奇怪的事情……

在FF中，一切都如人们所期望的那样工作(即，浏览器将单击解释为鼠标左键并切换.js_del。)

然而，在Safari中，当用户单击back时，浏览器应用相反的切换(即，显示.js_del，当光标悬停在.js_post上时，.js_del链接消失)。

更奇怪的是...

我决定添加一个处理程序，在单击.js_del中的'a‘元素时手动隐藏.js_post div，如下所示：

$(".js_post").find("a").click(function () {
    $(this).parents('.js_post').children('.js_del').hide();
});

现在，当在Safari中查看时，一切工作正常，但在FF中，情况正好相反(即，.js_del正在显示，当光标悬停在.js_post上时，.js_del链接消失)！

有什么想法吗？谢谢!

Answer 1

因为后退按钮不会使页面缓存表现出相同的行为，而且您不能确定dom元素的状态，所以toggle()调用可能会很粗糙。我分离了mouseenter和mouseleave，而不是hover()，并特别调用子选择器中的可见性。我还在最后抛出了一个.hide()调用，以标准化.js_del dom元素的可见性状态，而不考虑后退按钮浏览器的问题。

js

$(".main").on({
  "mouseenter":function(evt){
    $(this).children('.js_del:hidden').toggle();
  },
  "mouseleave":function(evt){
    $(this).children('.js_del:visible').toggle();
  }
}, ".js_post", null).find('.js_del:visible').hide();