jQuery 下拉列表多次保持上下滑动
HTML:
<nav class="main-nav">
<img src="img/logo.jpg">
<ul class="nav-list">
<li><a href="#">Home Page</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a>
<ul class="dropdown">
<li><a href="#"> Product 1</a></li>
<li><a href="#"> product 2</a></li>
<li><a href="#">product 3</a></li>
<li><a href="#">Product 4</a></li>
<li><a href="#">product 5</a></li>
<li><a href="#">product 6</a></li>
</ul>
</li>
<li><a href="#">Career</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
JavaScript:
$(function () {
$("li").has(".dropdown").hover(
function () {
$(this).find(".dropdown").slideDown();
},
function () {
$(this).find(".dropdown").slideUp();
}
);
});
最佳答案
当您快速连续多次将鼠标悬停在 Products 项上时,slideDown 和 slideUp 动画会排队。调用stop()
在执行新的 slideDown 或 slideUp 之前取消当前动画:
$("li").has(".dropdown").hover(
function () {
$(this).find(".dropdown").stop().slideDown();
},
function () {
$(this).find(".dropdown").stop().slideUp();
}
);
关于javascript - 下拉列表多次保持上下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36866956/