Question

我有一个带有嵌套的导航列表，将其悬停时可以向下（向上）扩展。 .slideUp（）函数可完美运行，但.slideDown（）根本没有动画。

id

$('.dropdownLink').hover(function(e) {
  e.preventDefault();
  $('#dropdown').slideDown(900, function() {
    $('#dropdown').css("visibility", "visible");
  });
}, function() {
  $('#dropdown').slideUp(900, function() {
    $('#dropdown').css("visibility", "hidden");
  });
});

#dropdown {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding-top: 10px;
  visibility: hidden;
}

#dropdown li {
  margin-top: 13px;
}

#dropdown li a {
  font-size: 0.9em;
  padding: 3px 3px;
}

Answer 1

无需玩visibility。只需将display: none添加到CSS中，jQuery就会处理其余的工作。

此外，请勿将hover事件监听器添加到链接中。一旦将鼠标移到子菜单，它就会消失，因为您的光标将不再悬停该链接。相反，您可以将其添加到父级<li>。

最后，如下面@Taplar所述，为避免动画在快速移入和移出时堆叠，请使用.stop()：

$('.dropdownContainer').hover(function(e) { // <---
  e.preventDefault();
  $('#dropdown').stop().slideDown(900); // <---
}, function() {
  $('#dropdown').stop().slideUp(900);   // <---
});

#dropdown {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding-top: 10px;
  display: none; /* <------------------------- */
}

#dropdown li {
  margin-top: 13px;
}

#dropdown li a {
  font-size: 0.9em;
  padding: 3px 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navigation">
  <ul>
    <li><a class="link" href="#">Home</a></li>
    <!--         vvvvvvvvv            -->
    <li class="dropdownContainer"><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a>
      <ul id="dropdown">
        <li><a class="link" href="#">Model S</a></li>
        <li><a class="link" href="#">Model 3</a></li>
        <li><a class="link" href="#">Model X</a></li>
        <li><a class="link" href="#">Cybertruck</a></li>
        <li><a class="link" href="#">Roadster</a></li>
        <li><a class="link" href="#">Energy</a></li>
      </ul>
    </li>
    <li><a class="link" href="#">About</a></li>
    <li><a class="link" href="#">Order</a></li>
    <li><a class="link" href="#">Contact</a></li>
  </ul>
</nav>

下拉列表不对jQuery中的.slideDown（）进行动画处理

1 个答案: