我有一个相当简单的布局，结果非常奇怪。Jquery .toggle（）和浏览器后退按钮

$(".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内“一”元素被点击这样的：

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

而现在，在Safari中查看时，所有的作品如预期，但在FF，它的相反（即.js_del正显示出，当光标悬停.js_post，.js_del链接消失）！

任何想法???谢谢！

来源

2013-04-23 Angelo Chrysoulakis

我想，做的jsfiddle http://jsfiddle.net/，因为你不应该无论如何使用“悬停”伪事件的吧:)更容易让人将帮助 – 2013-04-23 18:45:29

好（它已经在1.9了），我建议切换到mouseenter和mouseleave以及两个单独的事件，一个显示，另一个隐藏。这将防止切换与事件不同步。 – 2013-04-23 18:45:58

@PaulSullivan - 我想过jsfiddle，但我不认为我可以演示点击一个，然后点击浏览器后退按钮...？ – 2013-04-23 19:12:47

由于后退按钮不会使页面缓存行为相同，并且您不能确定dom元素的状态，所以调用toggle()可能很粗糙。我分出了mouseenter和mouseleave而不是hover()，并专门调出了子选择器内的可见性。我还在最后使用了一个.hide（）调用来标准化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();

来源

2013-04-23 18:54:11 DefyGravity

谢谢！抛出.hide（）的最后一部分;电话是什么伎俩。我将.hide（）附加到点击处理程序上，但显然我不需要这样做。 – 2013-04-23 19:22:31

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

回答

JS

相关问题