我有一個相當簡單的佈局，結果非常奇怪。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

相關問題