オンラインで見つかった解決策は、mouseenterイベントとmouseleaveイベントを変更することですが、変更した後もまだ機能しません。マウスをトリガー領域上でスライドさせると、ドロップダウン メニューが繰り返し表示され、非表示になります。
//purProduction为“购买产品”的id,showPurchase为下拉菜单的id $("#purProduction").mouseenter(function() { $("#showPurchase").slideDown(); }) $("#purProduction").mouseleave(function() { $("#showPurchase").slideUp(); }) $("#showPurchase").mouseenter(function(){ $("#showPurchase").slideDown(); }) $("#showPurchase").mouseleave(function(){ $("#showPurchase").slideUp(); }) <a class="name" id="purProduction" style="padding:20px;position:relative;left:1px;top:10px;">购买产品</a> <div class="showDiv" id="showPurchase" style="position:absolute;left:595px;top:50px;"> <!-- 向上的箭头 --> <div class="outTri"></div> <div class="inTri"></div> <a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">查询价格</a> <a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">等级购买</a> <a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">经销商查询</a> <a class="item" style="display:block;font-size:15px;border-bottom:1px solid rgb(240,243,244)">合作加盟</a> </div>
あなたが言及した「繰り返しポップアップ」について
それは実際には次のようなものです: マウスを purProduction に移動すると、マウスが showPurchase に移動すると、この時点で purProduction のマウスエンターがポップアップします。もう一度言いますが、毛織物はどのようなイベントを引き起こしますか?まず、マウスが purProduction を離れ、mouseleave をトリガーし、次にマウスが showPurchase に入り、mouseenter をトリガーします。これは問題ありません。一度閉じて再度ポップアップするだけのようですが、イベントは途中でもトリガーされます。 slideDown プロセス。showPurchase が slideDown の場合。プロセス中に繰り返しマウスの近くを通過すると、マウス イベントが繰り返しトリガーされます...
解決策は簡単です。最善の方法は、このメカニズムを放棄してホバーを使用することです。もちろん、コードを保持することに非常に抵抗がある場合は、Interval を使用して定期的にチェックすることを検討する必要があります...このように (醜い書き方を責めないでください。実際、これは CSS でカスタマイズする必要があります)
//purProduction为“购买产品”的id,showPurchase为下拉菜单的id$("#showPurchase").slideUp();var show=false, showed=false;setInterval(function () { if (show && !showed) { $("#showPurchase").slideDown(); showed=true; } else if (!show && showed) { $("#showPurchase").slideUp(); showed=false; }}, 100);$("#purProduction").mouseenter(function() { show=true;})$("#purProduction").mouseleave(function() { show=false;})$("#showPurchase").mouseenter(function() { show=true;})$("#showPurchase").mouseleave(function(){ show=false;})
それはあなたのイベントキューが原因です。これらはすべてマウスオーバーとマウスアウトです。スタイルを制御するには :hover を使用するか、前述のように stop メソッドを使用して前のイベントキューをクリアします。
ZhihuがStackOverflowになったように感じるのはなぜですか...
これは、マウスイベントが複数回トリガーされた後、ノードのアニメーションキューに複数のslideDownとslideUpが蓄積されるため、$('に変更されるためです#showPurchase' ).stop(true).slideDown() がうまくいくはずです。
2 つの方法
最初の方法は、ドロップダウン メニューとボタンをコンテナーに配置するだけです。実際には、hover() を使用することができます。エフェクトを追加する必要はありませんが、:hover を使用すると簡単です。
2 番目のタイプは、構造が変更されていない場合、実装が少し面倒です。通常、ツールチップは次のように実装されます。
以上がjQueryのドロップダウンメニューでマウスオーバーとマウスアウトが繰り返しトリガーされる問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。