Javascript Can'；jQuery不能正确地针对两个不同的下拉列表
我有两个独立的下拉列表，它们的悬停状态不能被基于html标记的css作为目标。我试图用jQuery解决这个问题，但已经完成了一半。有一个问题一直存在，我现在正在努力解决这个问题 如果我将第二个下拉列表的链接悬停，并将鼠标快速移动到第一个下拉列表的链接，然后将鼠标立即移动到显示的第一个下拉列表的容器中，此下拉菜单将消失。在本例中，我的脚本似乎删除了添加css类。这种情况只在鼠标快速移动时出现，但它让我发疯。我不明白为什么会这样。我提供了一个JSFIDLE演示，您可以在其中自己看到问题 jQueryJavascript Can'；jQuery不能正确地针对两个不同的下拉列表,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,我有两个独立的下拉列表，它们的悬停状态不能被基于html标记的css作为目标。我试图用jQuery解决这个问题，但已经完成了一半。有一个问题一直存在，我现在正在努力解决这个问题 如果我将第二个下拉列表的链接悬停，并将鼠标快速移动到第一个下拉列表的链接，然后将鼠标立即移动到显示的第一个下拉列表的容器中，此下拉菜单将消失。在本例中，我的脚本似乎删除了添加css类。这种情况只在鼠标快速移动时出现，但它让我发疯。我不明白为什么会这样。我提供了一个JSFIDLE演示，您可以在其中自己看到问题 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)
});
});
<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>
超级菜单1
超级菜单2
我的小提琴：我不知道为什么会这样。但是您可以使用jQuery.show（）和.hide（）而不是使用添加/删除类和不透明度 以下是更新的小提琴：
谢谢埃文斯的建议！我更喜欢css类解决方案，因为除了这些类之外，我还为cover blend向body容器添加了一个类。我刚刚在概述方面的演示中删除了它。也许重构代码可以解决这个问题。如果我找到了一个解决方案，如果没有人对此有解决方案，我将稍后尝试并保持此线程的最新状态
/* 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();
});