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 div中的链接，然后单击浏览器后退按钮时，会发生奇怪的事情……

在FF中，所有工作均符合人们的预期（即，浏览器将单击解释为鼠标离开并切换.js_del。）

但是，在Safari中，当用户单击时，浏览器将反向应用切换（即，显示.js_del，并且当光标悬停在.js_post上时，.js_del链接消失）。

甚至更奇怪...

我决定每次单击.js_post中的'a'元素时，都会添加一个处理程序以手动隐藏.js_del 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();