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>

你可以在site上看到问题，只需查看服务标签，然后用鼠标搞砸。

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是唯一的，因此您应该使用类。

JQuery Slide功能不正常

3 个答案: