0

これと同様の問題が発生しています。ドロップダウンボックスがちらつきます-Firefoxで発生しないように見えることを除いて、マウスをその上に移動すると、ドロップダウンメニューがちらつくJQueryとCSSが表示されます。<li>自分が持っているmouseoutイベントにアラートを入れたところ、メニュー内で別のイベントに移動するたびにアラートがトリガーされたことがわかりました。これがその背後にあるhtmlコードの重要な部分です。

<!--// HEADER BAR //-->
<div id="header">
<!--// NAVIGATION LINKS //-->
<div id="navigation">
    <!--// AUTHENTICATED //-->
    <div id="options" class="authenticated">
        <ul>
        <li><a href="javascript: toggleAccount()" class="account" title="Account">/</a></li>
        </ul>
    </div>
    <!--// ACCOUNT MENU //-->
    <div id="account_container" style="display: none;" onmouseout="hideAccount();">
        <div id="account">
            <ul>
            <li>Options...</li>
            </ul>
        </div>
    </div>
</div>
</div>

ご覧のとおり、「account_container」divはドロップダウンメニューです。これは、ユーザーが認証済みのアカウントliをクリックすると最初に表示され、ユーザーがliをもう一度クリックするかマウスアウトすると消えます。ナビゲーションdivの高さはcssで40pxに設定されているため、リンクされた質問のように位置の問題である可能性があると思いましたが、高さをautoに設定しても修正されず、アカウントコンテナを取り出すことができませんナビゲーションバーの位置が混乱するためです。ブラウザが1つのメニュー項目から別のメニュー項目へのシフトをマウスアウトイベントとして検出するのはなぜですか。それを防ぐにはどうすればよいですか。

問題のメニュー

編集：

この質問に対するAndyEの答えのようなことをしてもらえますか？に変更onmouseout="hideAccount()"してonmouseout="hideAccount.call(this)"、hideAccount関数内のドロップダウンの子要素の上にマウスがあるかどうかを検出できますか？もしそうなら、私はそれについてどうしますか？参考までに、hideAccount関数は次のとおりです。

function hideAccount(){
//alert("mouse out!");
$(".account_container").hide();
}
4

2 に答える 2

0

このようにhideAccount関数を変更することで解決しました：

function hideAccount(event){
var to = event.relatedTarget || event.toElement;
if(this.contains(to)){
    return;
}
else{
    $(this).hide();
}
}

問題は、Firefoxを除くすべてのブラウザが、account_containerからその子への移動をマウスアウトとして検出していたことでした。技術的には、マウスがコンテナ内のリスト要素の1つに置かれると、何らかの理由でコンテナ自体の上に置かれなくなります。マウスが非表示になる前に子要素に移動したかどうかを確認するブラウザは、Firefoxだけだったと思います。非表示にしようとする前に、子要素に移動しているかどうかを確認するためにjavascriptを挿入することが修正されました。

于 2012-07-26T19:30:24.367 に答える
0

これを試して：

   function toggleAccount(e){
     e.preventDefault();
     $("#account_container").toggle();   
   }
于 2012-07-19T20:04:35.140 に答える