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 では、すべてが期待どおりに機能します (つまり、ブラウザはクリックをマウスリーブと解釈し、.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 リンクが消えます)。

何かご意見は？？？ありがとう！

4

1 に答える 1

1

戻るボタンではページ キャッシュが同じように動作せず、dom 要素の状態を確認できないため、toggle()呼び出しが荒くなる可能性があります。の代わりに mouseenter と mouseleave を分割し、特に子hover()セレクター内の可視性を呼び出しました。.js_delまた、ブラウザーの戻るボタンの問題に関係なく、dom 要素の可視性の状態を標準化するために、最後に .hide() 呼び出しをスローしました。

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 に答える