我上网已经有一段时间了,现在正试图解决这个问题。可以找到正在发生的事情的视频:
https://i.gyazo.com/59fc489b6099b513c41aedeed482b8d2.mp4
$(document).ready(function() {
$(".dropdown1").mouseenter(function() {
$(this).children(".dropdown-content").stop().slideDown(300);
$("dropbtn1").html("Products ▲");
});
$(".dropdown1").mouseleave(function() {
$(this).children(".dropdown-content").slideUp(300);
$(".dropbtn1").html("Products ▼");
})
})
.dropdown3 {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #939393;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<a href="#" class="dropbtn0">
<li>Home</a>
</li>
<li class="dropdown1">
<a href="#" class="dropbtn1">Products ▼</a>
<div class="dropdown-content">
<a href="#">HR System</a>
<a href="#">Inventory</a>
<a href="#">CMS</a>
<a href="#">Project Management</a>
<a href="#">Todo list</a>
</div>
</li>
很明显我需要它不要重复自己。我已经应用了修复,例如使用 mouseenter/mouseleave 代替悬停和回调函数。当您只对一个下拉菜单执行此操作时,它可以完美运行,但是一旦您将鼠标悬停在所有这些菜单上,就像您在视频中看到的那样,它就会变得困惑。
感谢所有的帮助:)
最佳答案
你可以试试.stop
$(this).children(".dropdown-content").stop(true, true).slideDown(300); and
$(this).children(".dropdown-content").stop(true, true).slideUp(300)
关于jquery - 下拉菜单一直向下滑动(反复),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46951098/