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);
    });
});

jQuery的。为什么这不起作用？

2 个答案: