javascript - 子菜单在鼠标悬停时断开连接，也无法导航到子菜单

Question

我正在尝试创建一个子菜单，但必须将子菜单 HTML 保留在主菜单之外，并且在鼠标悬停时它会显示隐藏，但它没有按预期工作，我想我是没有尝试好的方法，有人可以研究一下并提出建议吗。

这是 JSfiddle demo

注意事项 1. 问题是，当您将鼠标悬停在“商店”上并尝试进入子菜单时，它隐藏了。 2. 我必须将子菜单 html 保留在主导航之外，因为子菜单必须全宽。 3. 我也想添加一些过渡效果，我知道使用 display none/block，过渡效果不起作用，但有人可以建议一下吗？

$('.shop').mouseenter(function(){
   			$('.primary-subnav').show()                        
		}).mouseleave(function(){
    		$('.primary-subnav').hide()
	});

.nav{float:left; width:100%;}
.primarynav {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: right;
}
.primarynav > li {
	list-style: none;
	display: inline;
}
.primarynav > li > a {
	display: inline-block;
	text-decoration: none;
	color: #333;
	padding: 0 15px;
	height: 67px;
	line-height: 67px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
	background-color: #c0e5da;
}
.primary-subnav {
	position: absolute;
	left: 0;
	top: 64px;
	width: 100%;
	border-top: 2px solid #c0e5da;
	background-color: rgba(255,0,0,0.9);
	min-height: 350px;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul class="primarynav">
    <li><a href="javascript:;" class="shop">Shop</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a></li>
    <li><a href="javascript:;">Nav Item</a></li>
  </ul>
</div>
<div class="primary-subnav">
  <div class="container"> Submenu Wrapper </div>
</div>

Answer 1

您可以将相同的事件处理程序附加到 .shop 的 mouseover 和 mouseleave 事件到 .primary-subnav。

$('.shop').mouseover(function(){
   			$('.primary-subnav').fadeIn(1000);                        
		}).mouseleave(function(){
    		$('.primary-subnav').hide();
	});
$('.primary-subnav').mouseover(function(){
   			$('.primary-subnav').show();
		}).mouseleave(function(){
    		$('.primary-subnav').hide();
	});

.nav{float:left; width:100%;}
.primarynav {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: right;
}
.primarynav > li {
	list-style: none;
	display: inline;
}
.primarynav > li > a {
	display: inline-block;
	text-decoration: none;
	color: #333;
	padding: 0 15px;
	height: 67px;
	line-height: 67px;
	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
.primarynav > li > a:hover {
	background-color: #c0e5da;
}
.primary-subnav {
	position: absolute;
	left: 0;
	top: 64px;
	width: 100%;
	border-top: 2px solid #c0e5da;
	background-color: rgba(255,0,0,0.9);
	min-height: 350px;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
  <ul class="primarynav">
    <li><a href="javascript:;" class="shop">Shop</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a> </li>
    <li><a href="javascript:;">Nav Item</a></li>
    <li><a href="javascript:;">Nav Item</a></li>
  </ul>
</div>
<div class="primary-subnav">
  <div class="container"> Submenu Wrapper </div>
</div>