为什么在创建定制的jQuery脚本时，我总是有一个问题阻碍了我！
无论如何，咆哮，我向所有人伸出援手，希望一个善良的灵魂能够告诉我我的行为是不正确的。
我为网站创建了一个下拉式jQuery导航菜单，当我尝试将光标从父级移动到嵌套子级并运行'hide（）时，只有菜单认为鼠标正在离开'目标' '使下拉菜单消失的功能。
我需要的是.dropnav元素（下拉菜单）在上述情况发生时不触发'$ target.on（'mouseover'，function（e）{'部分代码。
真的被困了所以任何有用的帮助都非常感激。
var hover, $this;
$target = $("header nav > ul > li");
$menu = $target.find('.dropnav');
$target.on('mouseover', function(e) {
e.stopPropagation();
clearTimeout(hover);
$this = $(this)
$this.toggleClass('active');
hide();
hover = setTimeout(show,400);
}).mouseout(function() {
clearTimeout(hover);
hover = setTimeout(hide,800);
});
if($(".dropnav:visible")) {
$menu.click(function(e) { e.stopPropagation(); });
$(document).click(function() { hide(); });
}
function show() {
$this.children('.dropnav').slideDown(800);
}
function hide() {
$('.dropnav:visible').fadeOut(200);
}
<header>
<div id="nav-filler"></div>
<div id="header-inner">
<nav>
<ul>
<li>
<a id="products" title="Browse our products">Products</a>
<div class="dropnav">
<div id="dropnav-filler"></div>
<div id="dropnav-inner">
<ul id="products-menu" class="dropnav-links">
<li>
<h6>Desktops</h6>
<ul>
<li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
<li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
<li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
<li><a href="/products/desktops/pc" title="Flex">PC</a></li>
<li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
</ul>
<h6>Workstations</h6>
<ul>
<li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
<li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
<li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
<li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
<li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
</ul>
</li>
<li>
<h6>On The Go</h6>
<ul>
<li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
<li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
<li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
</ul>
</li>
</ul>
<div id="showcase">
<div id="sc-inner"></div>
</div>
</div>
</div>
</li>
<li>
<a id="products" title="Browse our products">Other Products</a>
<div class="dropnav">
<div id="dropnav-filler"></div>
<div id="dropnav-inner">
<ul id="products-menu" class="dropnav-links">
<li>
<h6>Desktops</h6>
<ul>
<li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
<li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
<li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
<li><a href="/products/desktops/pc" title="Flex">PC</a></li>
<li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
</ul>
<h6>Workstations</h6>
<ul>
<li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
<li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
<li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
<li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
<li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
</ul>
</li>
<li>
<h6>On The Go</h6>
<ul>
<li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
<li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
<li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
</ul>
</li>
</ul>
<div id="showcase">
<div id="sc-inner"></div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
任何可以访问此内容的人都可以
http://jsfiddle.net/kYkba/11/链接。
提前致谢。
答案 0 :(得分：1)
使用mouseenter / mouseleave代替mouseover / mouseout：）
修改
您还应该更改
}).mouseout(function() {
到
}).on('mouseleave',function() {
答案 1 :(得分：1)
当你mouseover所显示的时候看到它，但是当你在.dropnav fadeOut中选择一些项目时，请尝试这样做：
var $target = $("header nav > ul > li");
$target.hover(function (e) {
$('> .dropnav', this).slideDown();
},function () {
$('> .dropnav', this).fadeOut();
});