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

Question

这是 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，因为当我尝试它时，子类别会隐藏。谢谢。

Answer 1

尝试:

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

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

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

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

最后，我并不完全相信slideUp和slideDown内联元素的行为将根据需要(即 <span> 与 block 级元素相反)。想一想，这可能是您问题的根本原因。来自 slideUp() :

Hide all matched elements by adjusting their height and firing an optional callback after completion.

内联元素不响应高度调整。所以你应该使用<div>或使其特别<span> display: block .