jquery - JQuery幻灯片功能无法正常工作

Question

好吧，我正在制作一个下拉菜单，但下拉部分有问题。如果按一次按钮，它会起作用，但有时它会发疯，如果我按一次，就会多次下降。我的代码...

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par).slideToggle(300);
  });
});
</script>

您可以在我的网站上看到问题，只需查看服务选项卡并在那里用鼠标闲逛。

Answer 1

您的动画发疯的原因是由于 Jquery 中的动画队列。

您要做的是在执行 slideToggle 事件之前停止队列，如下所示：

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
  });
});
</script>

查看此链接了解更多信息：http ://api.jquery.com/stop/

Answer 2

尝试将所有事件放在同一个函数中，如下所示：

$('#subitem').mouseenter(function(){
      $('#subitem').slideToggle(300);
      a.preventDefault();
    }).mouseleave(function(){
      $('#subitem').slideToggle(300);
    });

Answer 3

您应该先修复您的 HTML。您在表的每个 td 上使用相同的 id。链接也一样。id 是唯一的，因此您应该改用一个类。