jquery mouseenter適切なインプリメンテーション？

Question

私はナビゲーションメニューを持っています。そこにはメニュー「ホテル」があり、スライドダウンパネルが実装されています。私は2つの問題を抱えてい、今

$(document).ready(function(){ 

    $(".HotelPaneltrigger").mouseenter(function(){ 
     $(".panel").slideDown("slow"); 
     //$(this).toggleClass("active"); return false; 
    }); 

    $(".panel").mouseleave(function(){ 
     $(this).slideUp("slow"); 
    }); 
}); 

： これはスクリプトである .HotelPaneltriggerは、すぐにマウスが.panelエリアを離れるパネルがアップスライドダウン をスライドするパネル（.panelを）発射を

第1の問題：私の "HotelPaneltrigger" & ".panel"の間をホバリングすると、両方の機能が両方の要素間の長いユーザーの移動のために実行されるため、パネルが上下に複数回スライドすることになります。

第二の問題： は 『HotelPaneltrigger』にパネルを下にスライドさせ、長いユーザーが "であるとして開いたまま：パネルがすることをお勧めしますあなたに何ソリューションとすぐに、ユーザが「.panel」の領域を残し

を上にスライドするように定義されますHotelPaneltrigger "+" .panel "area ..彼らから離れたときに閉じますか？

ユーザーが離れてトリガリンクから移動したときにそれを閉じている間、私は.panel領域があなたの入力が

にメニューコードを高く評価している

...、パネルの上下複数のスライドを避けるために必要はありません

私が使用します。

 <ul class="primary_nav"> 

       <li class="active"><a href="link to.php" class="hoverBtn">Link 1</a></li> 
       <li class="HotelPaneltrigger"><a href="#" class="hoverBtn">Hotels</a></li> 
       <li><a href="#" class="hoverBtn">Link 3</a> 
        <ul class="subnav"> 
         <li><a href="link to.php">Link 4</a></li> 
         <li><a href="link to.php">Link 5</a></li> 
        </ul>   
       </li> 
       <li><a href="#" class="hoverBtn">Link 6</a> 
        <ul class="subnav"> 
         <li><a href="link to.php">Sub 1</a></li> 
         <li><a href="link to.php">Sub 2</a></li> 
         <li><a href="link to.php">Sub 3</a></li>   
        </ul> 
       </li>    

       <li class="last"><a href="link to.php" class="hoverBtn">Specials</a></li>   
     </ul> 

Answer 1

の作業例：基本的にhttp://jsfiddle.net/xmtpu/

をそのメニューのためにあなたがトリガー内でパネルを置くので両方のイベントハンドラをトリガに配置します。パネルが子供のため、マウスがパネルの上にあっても、あなたはまだタリガーに「入っています」。

Answer 2

これを試すことができます。

$('.HotelPaneltrigger').hover(
    function() { 
     // Show hidden content IF it is not already showing 
     if($('.panel').css('display') == 'none') { 
      $('.panel').slideDown('slow'); 
     } 
    }, 
    function() { 
     // Do nothing when mouse leaves HotelPaneltrigger 
     $.noop(); 
    } 
); 

$('.panel').mouseleave(function() { 
     $(this).delay('500').slideUp('slow'); 
}); 

これは完全に動作しない場合にもhoverIntentプラグインを試みることができる - http://cherne.net/brian/resources/jquery.hoverIntent.html