javascript - jQuery。为什么这不起作用？

这是html代码：

                   <a class="cat" href="#">category</a>
                 <span class="kiti" style="position:absolute; padding:5px; margin-left:-18px; display:none; background-color:#000">
                    <a href="#">sub1</a>
                    <br /><a href="#">sub2</a>
                    </span>

和functions.js

$(document).ready(function() {
  $(".cat").hover(function() {
    $(this).next().slideDown(300);
  });
  $(".cat").mouseout(function() {
    $('.kiti').slideUp(300);
  });
});

如何制作，允许按sub1和sub2，因为当我尝试时，会隐藏子类别。
谢谢。

最佳答案

尝试：

$(document).ready(function() {
  $(".cat").hover(function() {
    $(this).next().stop().slideDown(300);
  }, function() {
    $(this).next().stop().slideUp(300);
  });
});

hover()需要两个回调：第一个是将鼠标悬停在元素上的回调。第二个是鼠标离开的时间。

请注意，您还缺少一些分号和其他语法问题。

另外，在这种情况下，建议使用stop()动画，否则在快速触发事件的情况下您可能无法获得所需的结果。

最后，我不完全相信slideUp和slideDown对于内联元素的行为（如<span>而不是块级元素）会表现出预期的效果。想一想，这可能是问题的根本原因。从slideUp()：


  通过调整隐藏所有匹配的元素
  他们的高度和射击可选
  完成后回调。


内联元素不响应高度调整。因此，您应该使用<div>或创建特定的<span> display: block。

关于javascript - jQuery。为什么这不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1995519/