查询。为什么这不起作用？

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> 与块级元素相对）。想一想，这可能是你问题的根本原因。来自slideUp()：

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

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

Answer 2

您没有正确应用hover。它需要两个函数作为参数（mouseover 和 mouseout）。试试：

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

或普通的 mouseover/mouseout 等效项：

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