下拉菜单继续向下滑动（重复）

Question

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

https://i.gyazo.com/59fc489b6099b513c41aedeed482b8d2.mp4

＆＃13;

＆＃13;

$(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 ▼");
  })
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

很明显，我需要它不要重演。我已经应用了修复，例如使用mouseenter / mouseleave而不是悬停和回调函数。当你只对一个下拉菜单进行操作时，它可以完美地工作，但是一旦你将它们全部悬停在所有类似于你在视频中看到的内容，它就会变得混乱。

感谢所有帮助：）

Answer 1

你可以试试.stop

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

Answer 2

你可以用css（没有动画），如果它适合你......

.dropdown3 {
  display: inline-block;
}

.dropdown1:hover .dropdown-content {
  display: 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>

Answer 3

试试这个，

$(document).ready(function() {
  $(".dropdown1").hover(function() {
      if ($(this).children(".dropdown-content").is(":visible")) {
            $(this).children(".dropdown-content").slideUp();
        } else {
           $(this).children(".dropdown-content").slideDown();
        }
  });
});

此方法检查.dropdown-content是否可见，并决定是slideDown下拉列表还是slideUp