javascript - 从 div 悬停到 UL 时保持 UL 可见

Question

我有一个自定义标题/导航，其中有两个元素代表网站的两个部分。我希望能够将鼠标悬停在其中一个元素上并显示特定菜单。但是，菜单列表不是该元素的子元素。所以我不能用 CSS 做到这一点。

我遇到的问题是当我将鼠标悬停在元素上时，菜单显示。但是我将鼠标悬停在菜单上，一旦离开元素，菜单就会消失。我已经尝试将 display:block 添加到 manu 项，并运行 .delay() 方法，但是当将鼠标从 div 移开时仍然有轻微的闪烁.

这是我当前的代码:

//HTML

<header>

    <a class='hoverOverOne'>Hover over me to show menu</a>
    <a class='hoverOverTwo'>Hover over me to show menu</a>

    <nav>

<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>

</ul>

<ul id='menuToShow-Two'>
    <li>testing</li>
    <li>testing</li>
</ul>

</nav>
</header>

//jQuery

jQuery("a.hoverOverOne").hover(
      function () {
         jQuery('#menuToShow-One').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-One').slideUp('medium').delay(500);
    });

    jQuery("a.country").hover(
      function () {
         jQuery('#menuToShow-Two').slideDown('medium').delay(500);
      }, 
      function () {
         jQuery('#menuToShow-Two').slideUp('medium').delay(500);
    });

//CSS

#menuToShow-One{
display:none;
}

#menuToShow-Two{
display:none;
}

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

$(function(){
	$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
		var menu = '#menu'+this.id;
        $('.menu').not(menu).slideUp(0);
        $(menu).slideDown('medium');
    });
	$("ul.menu").mouseleave(function () {
		$(this).slideUp('medium');
    });
});

a.hoverOverOne{
  margin-right: 20px;
}
#menuToShow-One{
  display:none;
}
#menuToShow-Two{
  display:none;
}
nav{
  display:inline-block;
}
ul li{
  display:block;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
	<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
	<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
	<nav>
		<ul id='menuToShow-One' class="menu">
			<li>testing menu 1</li>
			<li>testing menu 1</li>
		</ul>
		<ul id='menuToShow-Two' class="menu">
			<li>testing menu 2</li>
			<li>testing menu 2</li>
		</ul>
	</nav>
</header>