我有一个链接（水平导航条项目），当用户将鼠标悬停在其上时，另一个div应该在slideDown下方。 .toggle无法正常工作，因为当您将鼠标悬停在链接上时，它会不断切换div。
我尝试使用mouseover和mouseOut编写自己的内容，但它过于敏感，而div在显示之间来回翻转（阻止，无）。
这是我的jQuery：
$(".topHorzNavLink").mouseover(function() {
//get which link we hovered over
var thisHorzLink = $(this).attr('linkItem');
if (thisHorzLink == "link2") {
$("#hoverContainer").slideDown('slow');
}
});
$(".topHorzNavLink").mouseout(function() {
//get which link we hovered over
var thisHorzLink = $(this).attr('linkItem');
if (thisHorzLink == "link2") {
$("#hoverContainer").slideUp('slow');
}
});
这是HTML（我知道，嗯，它在某些时候会是动态的）：
<nav id="topHorzNav">
<div id="topHorzNavLinks">
<ul>
<li><p class="topHorzNavLink" linkItem="link1"><a href="#">Link 1</a></p></li>
<li><p class="topHorzNavLink" linkItem="link2"><a href="#">Link 2</a></p>
<div id="hoverContainer">
<div class="colContainer">
<div class="colContainer">
<div class="colContainer">
<div class="colContainer">
<div class="colContainer">
<!--col 1-->
<div class="col">
<p class="colHeader">Heading 1</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</div>
<div class="colDivider"> </div>
<!--col2 -->
<div class="col">
<p class="colHeader">Heading 2</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</div>
<div class="colDivider"> </div>
<!--col3 -->
<div class="col">
<p class="colHeader">Heading 3</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</div>
<div class="colDivider"> </div>
<!--col4 -->
<div class="col">
<p class="colHeader">Heading 4</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</div>
<div class="colDivider"> </div>
<!--col5 -->
<div class="col">
<p class="colHeader">Heading 5</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link3">Link 3</a></p></li>
<li><p class="topHorzNavLink"><a href="#" class="topHorzNavLink" linkItem="link4">Link 4</a></p></li>
</ul>
</div>
<div id="topHorzNavRight"> </div>
</nav>
<!--end top horz nav items-->
答案 0 :(得分：1)
您需要使用.stop()功能清除排队的动画，否则每次进出<li>时都会触发更多动画。另一个问题是，即使指针位于子元素内，您正在使用mouseover()触发动画。当指针离开子元素时，mouseout()也会创建冒泡的事件。最好使用.mouseenter()和.mouseleave()。
这是使用HTML5和jQuery 1.7.2的a demo。我不得不说你的例子很冗长！
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<div>
<!--col 1-->
<section>
<header><h1>Heading 1</h1></header>
<article>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</article>
</section>
<!--col2 -->
<section>
<header><h1>Heading 2</h1></header>
<article>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</article>
</section>
<section>
<header><h1>Heading 3</h1></header>
<article>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</article>
</section>
<section>
<header><h1>Heading 4</h1></header>
<article>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</article>
</section>
<section>
<header><h1>Heading 4</h1></header>
<article>
<p class="colText">Lorem Ipsum Dolar</p>
<p class="colText">Lorem Ipsum Dolar</p>
</article>
</section>
</div>
</li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
ul {
width:150px;
}
li {
border:1px dashed lightgrey;
}
li > div {
display:none;
}
h1 {
font-size:14px;
}
section {
padding-bottom:8px;
border-bottom:1px dashed lightblue;
}
$('li').on({
mouseenter: function() {
$(this).find('div:first').stop(true, true).slideDown('slow');
},
mouseleave: function() {
$(this).find('div:first').stop(true, false).slideUp('slow');
}
});
答案 1 :(得分：0)
您最好使用hover()功能。它有两个参数，每个参数都是一个函数。第一个用于mouseover事件，第二个用于mouseout事件。
我尝试了以下代码并且它有效：
$(function() {
$('#nav-list>li').hover(function(e) {
$(this).children('ul').slideDown(300);
}, function(e) {
$(this).children('ul').slideUp(200);
});
});