2

基本的に、私のクライアントは、画像の上にマウスを置いたときに非表示のナビゲーションを表示したいと考えています。ナビゲーションの上にマウスを置いたときにナビゲーションが非表示にならず、ナビゲーションを離れたときに非表示になるという問題を解決しました。私が遭遇している2つの問題があり、私はうまくいくと思ったさまざまな異なる組み合わせを試しましたが、もちろんそうではありませんでした。2つの問題は次のとおりです。

  1. ナビゲーションをマウスオーバーせずに画像をマウスアウトすると、ナビゲーションを非表示にする必要があります。現時点では、画像をもう一度マウスオーバーするか、ナビゲーションをマウスオーバーするまで、画像は開いたままになります。

  2. 2番目の問題は、ナビゲーションを直接マウスオーバーして画像の上にマウスオーバーすると、関数がループしてナビゲーションが非表示になり、ナビゲーションが再び開くことです。slideToggleを表示に変更しようとしましたが、他にも多くの問題が発生します。

現在、コードは私が望むように動作しており、許容できると見なすことができますが、上記の問題を解決する方法を知りたいです。hoverIntentプラグインを使用してマウスの動きを感知し、マウスの速度が低下した場合にのみ機能をトリガーすることを考えましたが、正しく機能させることができませんでした。明らかに、私はjavascriptとjqueryに関しては初心者なので、ご容赦ください。しかし、助けていただければ幸いです。

これが私のコードです

$(document).ready(function(){

$(".nav-body").hide();

$(".nav-head").mouseover(function(){
$(this).next(".nav-body").slideToggle(600);
$(".nav-body").mouseleave(function(){
$(this).hide(700);
});
});

});

これが私のhtmlです：

<p class="nav-head"><img src="/images/face-btn.jpg" /></p> 
<div class="nav-body"> 
<ul><?php wp_list_pages('title_li=&child_of=12&depth=1'); ?></ul> 
</div>
4

1 に答える 1

1

マークアップの変更

<div class="nav-container">
    <p class="nav-head"></p>
    <div class="nav-body"></div>
</div>

Javascript

var eventHandler;

eventHandler = function(){$(".nav-head").one("mouseover",function(){
   $(this).next(".nav-body").slideToggle(600);
    $(".nav-container").one("mouseleave", function(){
        $(this).find(".nav-body").hide(700, eventHandler);
    });
});};

eventHandler();

最初の変更は、mouseleaveからmouseoutへの変更です。ナビゲーション内には、実際のナビゲーションボディをカバーする子孫要素が存在する可能性があります。マウスを離れると、ハンドラーは、マウスがバインドされた要素を離れたときにのみトリガーされます。それが要素を下降することを超える場合、それは去ると見なされます。Mouseoutは、バインドされたオブジェクトの境界外にある場合にのみトリガーされます。

次に行ったのは、ハンドラーバインディング操作にデリゲートを割り当てて、hide（）のコールバック関数として使用できるようにすることでした。このように、非表示が完全に完了するまで、イベントハンドラーはナビゲーションヘッドに復元されません。

最後は、mouseoutハンドラーをそれを含むdivに割り当てることでした。このように、それが含まれているので、それがnav-head（またはnav-body）を離れる限り、体は隠れます。

于 2011-08-18T16:35:38.583 に答える