0

我有一个相当简单的布局，结果很奇怪。

$(".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 中，一切都按预期工作（即，浏览器将单击解释为 mouseleave 并切换 .js_del。）

然而，在 Safari 中，当用户单击返回时，浏览器会应用反向切换（即，显示 .js_del，当光标悬停在 .js_post 上时，.js_del 链接消失。）

更奇怪的是...

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

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

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

有什么想法吗？？？谢谢！

4

1 回答 1

1

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

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();
于 2013-04-23T18:54:11.183 回答