jQueryで2つの異なるドロップダウンを適切にターゲットできません

2つの別々のドロップダウンがあります。そのホバー状態はhtmlマークアップに基づいてCSSでターゲットできません。私はこれをjQueryで解決しようとしましたが、途中で終了しました。 1つの問題が常に存在し、私は今これを数日で解決しようとしています。jQueryで2つの異なるドロップダウンを適切にターゲットできません

私は二のドロップダウンのリンクを置いて、最初のドロップダウンのリンクに本当に速いマウスを移動し、その直後に最初に表示のコンテナにマウスを移動した場合ドロップダウンメニューが表示されなくなります。この場合、私のスクリプトは追加するcssクラスを削除するようです。この状況は、マウスの動きが速い場合にのみ表示されますが、それは私を狂ってしまいます。私はなぜこれが起こるのか理解できません。 jsfiddleのデモが含まれています。そこでは自分で問題を見ることができます。

jQueryの

jQuery(document).ready(function($) { 
    var $body = $('body'), 
     $tg_header = $('#main-header'), 
     $tg_top_menu = $('ul.nav'), 
     /*$tg_submenu_link = $('.tg-submenu__link'),*/ 
     $tg_submenu_link_tg = $('.tg-submenu__link--tg'), 
     $tg_submenu_link_abteilungen = $('.tg-submenu__link--abteilungen'), 
     $tg_submenu = $('.tg-submenu'), 
     $tg_submenu_tg = $('.tg-submenu__tg'), 
     $tg_submenu_abteilungen = $('.tg-submenu__abteilungen'), 
     et_menu_hover_triggered = false; 

       /* General Hiding Function for first mega menu */ 
     function tg_hide_tg() { 
      setTimeout(function() { 
       if ($tg_top_menu.find('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0) { 
        $body.removeClass('tg-submenu__tg--active') 
       }; 
       }, 50); 
     } 

       /* General Hiding Function for second mega menu */ 
     function tg_hide_abteilungen() { 
      setTimeout(function() { 
       if ($tg_top_menu.find('.tg-submenu__link--abteilungen:hover').length == 0 && $('.tg-submenu__abteilungen:hover').length == 0) { 
        $body.removeClass('tg-submenu__abteilungen--active') 
       }; 
       }, 50); 
     } 

       /* Mouse Hover Mega Link 1 and Leave Link */ 
     $tg_submenu_link_tg.mouseenter(function() { 
      $body.addClass('tg-submenu__tg--active'); 
     }).mouseleave(function() { 
      tg_hide_tg(); 
     }); 

       /* Mouse Leave Mega Menu Container 1 */ 
     $tg_submenu_tg.mouseleave(function() { 
      setTimeout(function() { 
       if ($('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0) { 
        $body.removeClass('tg-submenu__tg--active'); 
       }; 
      },50) 
     }); 

       /* Mouse Hover Mega Link 2 and Leave Link */ 
     $tg_submenu_link_abteilungen.mouseenter(function() { 
      $body.addClass('tg-submenu__abteilungen--active'); 
     }).mouseleave(function() { 
      tg_hide_abteilungen(); 
     }) 

     /* Mouse Leave Mega Menu Container 2 */ 
     $tg_submenu_abteilungen.mouseleave(function() { 
      setTimeout(function() { 
       if ($('.tg-submenu__link--abteilungen:hover').length == 0 && $('.tg-submenu__abteilungen:hover').length == 0) { 
        $body.removeClass('tg-submenu__abteilungen--active'); 
       }; 
      },50) 
     }); 
    });

HTMLマークアップ

<body> 
<header id="main-header"> 
    <div class="container"> 
    <div id="et-top-navigation"> 
      <div class="tg-mainMenu__left"> 
       <nav id="top-menu-nav"> 
        <ul id="top-menu" class="nav"> 
      <li id="menu-item-154" class="tg-submenu__link tg-submenu__link--tg menu-item"><a href="#">MEGA LINK 1</a></li> 
      <li id="menu-item-156" class="tg-submenu__link tg-submenu__link--abteilungen menu-item"><a href="#">MEGA LINK 2</a></li> 
      <li id="menu-item-166" class="menu-item menu-item"><a href="#">Normal Link 3</a></li> 
      </ul>      
     </nav> 
      </div><!-- TG-mainMenu__left--> 
      <div class="tg-mainMenu__right"> 
       <nav id="top-menu-nav"> 
        <ul id="top-menu" class="nav"> 
      <li id="menu-item-154" class="menu-item menu-item"><a href="#">Normal Link 4</a></li> 
      <li id="menu-item-154" class="menu-item menu-item"><a href="#">Normal Link 5</a></li> 
      <li id="menu-item-154" class="menu-item menu-item"><a href="#">Normal Link 6</a></li> 
      </ul>      
     </nav> 
      </div> <!-- tg-mainMenu__right --> 
     </div> <!-- #et-top-navigation --> 
    <!-- TG Mega 1 --> 
    <div class="tg-submenu tg-submenu__tg"> 
     <div class="container tg-submenu__content"> 
     <h1> 
     MEGA MENU 1 
     </h1> 
     </div> 
    </div> 
    <!-- Abteilungen Mega --> 
    <div class="tg-submenu tg-submenu__abteilungen"> 
     <div class="container tg-submenu__content"> 
      <h1> 
      MEGA MENU 2 
      </h1> 
     </div> 
    </div> 
    </div> <!-- .container --> 
</header> 
</body>

マイフィドル：私はなぜこれが起こっている知らないhttps://jsfiddle.net/hfammzce/

出典

2017-12-06 DoUtDes

。しかし、add/removeクラスと不透明度を使用する代わりに、jQuery .show（）と.hide（）を使用できます。アドバイス・エヴァンスのためhttps://jsfiddle.net/1dzyszdq/

/* General Hiding Function for first mega menu */ 
    function tg_hide_tg() { 
     setTimeout(function() { 
      if ($tg_top_menu.find('.tg-submenu__link--tg:hover').length == 0 && $('.tg-submenu__tg:hover').length == 0) { 
       $(".tg-submenu__tg").hide(); 
      }; 
      }, 50); 
    } 


    /* Mouse Hover Mega Link 1 and Leave Link */ 
    $tg_submenu_link_tg.mouseenter(function() { 
     $('.tg-submenu__tg').show(); 
    }).mouseleave(function() { 
     tg_hide_tg(); 
    });

出典

2017-12-06 21:30:00 evans

感謝：ここ

が更新フィドルです！私はこれらのクラスのほかに、カバーブレンドのためのボディコンテナにクラスを追加するので、CSSクラスソリューションを好むでしょう。私はデモでオーバービューの部分を削除しました。コードをリファクタリングしてこの問題を解決できるかもしれません。私はこれを後で試し、このスレッドを最新の状態に保ちます。誰にも解決策が見つからなければ解決策を見つけたら – DoUtDes

jQueryで2つの異なるドロップダウンを適切にターゲットできません

答えて

関連する問題