Question

我有两个单独的下拉列表，其悬停状态不能基于html标记由css定位。我试图通过jQuery解决这个问题，我已经完成了一半。一直存在一个问题，我现在试图解决这个问题。

如果我将鼠标悬停在第二个下拉列表的链接，并将鼠标快速移动到第一个链接 下拉菜单然后立即将鼠标移动到显示的第一个下拉列表的容器中，此下拉菜单将消失。在这种情况下，我的脚本似乎删除了添加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/

Answer 1

我不知道为什么会这样。但是你可以使用jQuery .show（）和.hide（）而不是使用add / remove class和opacity。

这是更新的小提琴：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();
    });

无法通过jQuery正确定位两个不同的下拉列表

1 个答案: