我有一个链接（水平导航栏项目），当用户将鼠标悬停在它上面时，另一个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-->
您需要
使用 .stop() 函数清除排队的动画，否则每次进出<li>都会触发更多动画。另一个问题是，即使指针位于子元素内，您也正在使用触发动画的mouseover()。 mouseout() 还会创建在指针离开子元素时冒泡的事件。你最好使用.mouseenter()和.mouseleave().
下面是使用 HTML5 和 jQuery 1.7.2 的演示。我不得不说你的例子非常冗长！
.HTML
<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>
.CSS
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;
}
JavaScript
$('li').on({
mouseenter: function() {
$(this).find('div:first').stop(true, true).slideDown('slow');
},
mouseleave: function() {
$(this).find('div:first').stop(true, false).slideUp('slow');
}
});
你最好使用 hover() 函数。它有两个参数，每个参数都是一个函数。第一个用于mouseover事件，第二个用于mouseout事件。
我尝试了以下代码，它起作用了：
$(function() {
$('#nav-list>li').hover(function(e) {
$(this).children('ul').slideDown(300);
}, function(e) {
$(this).children('ul').slideUp(200);
});
});