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