jQuery로 두 개의 다른 드롭 다운을 올바르게 타겟팅 할 수 없습니다.

두 개의 개별 드롭 다운이 있습니다. html 상태는 html 마크 업을 기준으로 CSS로 타겟팅 할 수 없습니다. jQuery로이 문제를 해결하려고 노력했으며 중간에 완료되었습니다. 한 가지 문제가 항상 존재하고 있으며 지금까지 해결해야 할 문제가 있습니다.jQuery로 두 개의 다른 드롭 다운을 올바르게 타겟팅 할 수 없습니다.

나는 초 드롭 다운의 링크를 가져과 첫 드롭 다운의 링크에 정말 빨리 마우스를 이동 한 다음 용기 표시 최초의에 즉시 마우스를 이동하면 드롭 다운 메뉴가 사라집니다. 이 경우 내 스크립트에서 추가하는 css 클래스를 제거하는 것 같습니다. 이 상황은 빠른 마우스 움직임과 함께 나타납니다 만 그것은 나를 미치게합니다. 왜 이런 일이 일어나는지 알 수 없습니다. jsfiddle 데모가 포함되어 있습니다. 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

. 하지만 class/opacity 추가/제거를 사용하는 대신 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로 두 개의 다른 드롭 다운을 올바르게 타겟팅 할 수 없습니다.

답변

관련 문제