0

最近、オンライン検索の量が解明に役立たないように見えるという問題に遭遇しました。特に、jQuery hoverIntentプラグインを使用すると、最初の「hoverIn」関数が正しく呼び出されますが、「hoverOut」は適用されません。

簡単な背景として、これを順序付けられていないリストから作成されたメニューで使用しています。jQueryの.slideDown（）エフェクトは「hoverIn」で使用され、.slideUp（）は「hoverOut」関数で使用されます。最初の.slideDown（）は機能しますが、カーソルが領域を離れると、.slideUp（）が適用される代わりに、要素が即座に消えます。同様に、後続のマウスオーバー/マウスアウトイベントは「hoverIn」または「hoverOut」関数をトリガーしません。最初の「hoverIn」関数を適用するには、ページを完全に更新する必要があります。

.fadeIn（）、. fadeOut（）、. show（）、animate（）など、さまざまなjQueryアニメーション効果を試しましたが、すべて成功しませんでした。私も過去に何度もこの問題に遭遇しました、そして私はおそらくそれを引き起こしているのではないかと思っています。

これが私が使用しているhoverIntentコードです：

var ddMainMenuConfig = {  
over: revealMainMenuChildren, // function = onMouseOver callback (REQUIRED)    
timeout: 700, // number = milliseconds delay before onMouseOut    
out: hideMainMenuChildren
};

function revealMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideDown(300); }

function hideMainMenuChildren(){ $(this).find("ul").filter(":first").stop().slideUp(500); }

$("#menu ul ul").parent().addClass("ddarrow").append("<span class=\"childIndicator\"></span>");
$("#menu ul ul").css({display: "none"}); // Opera Fix
$("#menu ul li").hoverIntent(ddMainMenuConfig);

これが行われているテストページを見たい場合に備えて、ここにリンクがあります：

http://test.nimblehost.com/dexture/

なぜこれが起こっているのか、そしてそれを修正する方法についての提案をいただければ幸いです。GoogleCDN経由で提供されるjQueryv1.7.xとhoverIntentのr6を使用しています。

4

4 に答える 4

0

メニューにカーソルを合わせると、700ミリ秒の遅延やアニメーションは表示されませんが、メニューは開きます。hoverIntentがメニューを開いたり閉じたりするのを妨げている他のコードが使用されている可能性はありますか？console.log（ "foo"）やalert（ "foo"）などのデバッグステートメントをホバー関数に追加して、正しく呼び出されることを確認してください。

これはあまり答えではないことはわかっていますが、ページを最も基本的なHTMLとJavaScriptのみに分解し、問題がなければ元に戻そうと思います。

于 2012-04-03T03:39:46.283 に答える
0

実際のテスト環境がなければこれをデバッグするのは難しいですが、ここで私が行うことがいくつかあります。

stop（）を使用するか、完全に削除してみてください。

$(this).find("ul").filter(":first").stop(true, true)...

下のこの行は、

$("#menu ul ul").parent().addClass("ddarrow")

する必要があります（上記の2 ulに注意してください）。これは他の2つの同様のセレクターに行きます。

$("#menu ul li").parent().addClass("ddarrow")

上記の変更を行うと、問題の修正に近づくと思います。

これはあなたがしていることと似ているので、インスピレーションを得るためにこのデモを見ることもできます。jQueryイージングも使用しています。これはかなりクールなIMOです。

naviDropDown

于 2012-04-03T04:36:15.420 に答える
0

stopを使用する代わりに、ホバー関数内にconsole.log（）ステートメントとともにsetTimeout関数を配置して、それが機能していることを確認できるようにします。

また、セレクターが正しく機能していることを確認してください

于 2012-04-03T04:41:57.763 に答える
0

同じ問題に遭遇し、検索してこのページを見つけた人のために、私はついに原因を見つけることができました-メニューの私自身のCSSコードが原因でした。

具体的には、JavaScriptが無効になっている可能性のある訪問者のために、純粋なCSSを使用したドロップダウンメニューとして機能するようにメニューのスタイルを設定しました。hoverIntentホバー/非表示スタイルを制御する2行のCSSコードを削除すると、プラグインが期待どおりに機能するようになったため、このスタイルは明らかに競合の原因でした。

参考までに、CSSコードの2行を次に示します。これらのコードを削除すると、ホバー関数が正しく機能するようになります。

/* Hide Drop Down Menu Items */
#menu ul li:hover ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li:hover ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul, #menu ul li:hover ul ul ul ul ul ul ul ul ul {display: none;}

/* Show on Hover */
#menu ul li:hover ul, #menu ul li li:hover ul, #menu ul li li li:hover ul, #menu ul li li li li:hover ul, #menu ul li li li li li:hover ul, #menu ul li li li li li li:hover ul, #menu ul li li li li li li li:hover ul, #menu ul li li li li li li li li:hover ul, #menu ul li li li li li li li li li:hover ul {display: block;}
于 2012-04-06T03:45:41.273 に答える