JS

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

Jquery .toggle（）和浏览器后退按钮

1 个答案:

JS