jquery - 下拉菜单一直向下滑动(反复)

Question

我上网已经有一段时间了，现在正试图解决这个问题。可以找到正在发生的事情的视频:

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 &#9660;</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 代替悬停和回调函数。当您只对一个下拉菜单执行此操作时，它可以完美运行，但是一旦您将鼠标悬停在所有这些菜单上，就像您在视频中看到的那样，它就会变得困惑。

感谢所有的帮助:)

Answer 1

你可以试试.stop

$(this).children(".dropdown-content").stop(true, true).slideDown(300); and 
$(this).children(".dropdown-content").stop(true, true).slideUp(300)