マウスがドロップダウンメニューの子メニューにある間に親メニューを保持する方法

Question

こんにちは、私はサブメニューでマウスを動かしながら親メニューを保持する方法を知っています。

私はjQueryの初心者です。私はあなたにいくつかのヒント/提案を手伝っていただきたいと思います。

LINK TO MENU WEBSITE

jQueryのコード

// Navigation Slide // 
var navHover = function() { 
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing') 
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing') 
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing') 
} 
var navRelease = function() { 
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing'); 
} 

$('#navInside a.topLevel').hover(navHover, navRelease); 


// Dropdown animation  
      function mainmenu(){ 
      jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix 
      jQuery(" #navInside li").hover(function(){ 
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500); 
        },function(){ 
        jQuery(this).find('ul:first').css({visibility: "hidden"}); 
        }); 
      } 

      jQuery(document).ready(function(){     
       mainmenu(); 
      }); 

ナビゲーションHTML

<div id="navInside"> 
<li><a class="topLevel" href="">Home</a></li> 
<li><a class="topLevel" href="">Options</a> 
    <ul> 
     <li><a href="">Submenu 1</a></li> 
     <li><a href="">Submenu 2</a></li> 
    </ul> 
</li> 
<li><a class="topLevel" href="">Thanks</a></li> 

Answer 1

問題は、トップレベルのホバーは< >要素であるということです。サブメニューに移動すると、サブメニュー要素は >の子ではなく、<の子ではなく、>であるため、<の>要素ではmouseleaveイベントが発生します。代わりにこれを試してみてください：

ところで

$('#navInside a.topLevel').parent().hover(navHover, navRelease); 

- あなたはホバー関数内で$（this）を使用してnavHover/navReleaseコードを簡素化することができます。そうすれば、要素に特定のIDを必要としません。あなたは現在の要素に相対的にそれらを見つけるでしょう。

Answer 2

これはJSを一切必要としません。

の子であるulを表示する場合は、その上にマウスカーソルを置いたときにのみ表示します。これはli ul（mouseout状態）とli:hover ul（mouseover状態）によって処理されます。

これを上に移動すると、LIも表示されているためLIの高さが変わります。そのため、（LIs）領域を残さない限り表示されます（テキスト+ UL）。

---

アニメーションが必要な場合は、CSSトランジションをご覧ください。ブラウザのサポートは不安定ですが、おそらくあなたがやろうとしていることは普遍的にサポートされるでしょう。エリアが変化している要素のマウスオーバー/アウトイベントを正確に判断するのは難しいことがあります。 本当にのようなものが必要な場合にのみJSを使用することをおすすめします。