jquery下拉div不太工作

Question

当有人将鼠标悬停在链接上时，我正在尝试使 div 下拉。 div 里面是一个登录表单。以下代码仅适用于如果我将鼠标悬停在 div 确实出现的链接上。但是，当我将鼠标从链接向下移动到 div 上时，div 立即缩回。请看：

jQuery(document).ready(function() {
    jQuery('.slidedown').hide();
    jQuery('a.top-link-cart').hover( function(){ // 进入动画

    jQuery('.slidedown').stop(true,true).animate({
        高度：['切换'，'摆动']，
        }, 600, function() { /* 动画完成 */ });

    }, function(){ // 离开动画

jQuery('.slidedown').mouseout(function() {
   设置超时（函数（）{
      jQuery('.slidedown').stop(true,true).animate({
          高度：'0px'}, 600, function(){});}, 200 ); // setTimeout 到此结束
}); // mouseout 到此结束
    });
});

我想要实现的只是让 div a）如果用户将鼠标从链接移到 div，则保持打开 b）如果用户将鼠标从链接移开但未移入 div，则关闭，c）如果用户移动，则关闭鼠标移出 div。我认为 .mouseout 函数会使 div 保持打开状态，这样我至少可以将鼠标移到它上面，但它不起作用。有任何想法吗？我会很感激这让我头疼了一个星期。谢谢。

Answer 1

您不应该使用.hover 而应使用.mouseover() 作为您的第一种方法。

Answer 2

您可以将链接和执行动画的 div 包装在另一个 div 中，然后将悬停应用到父 div 而不是链接。这样你仍然会验证。例如：

<div class="whatever">
    <a class="top-link-cart">Show login form</a>
    <div class="slidedown">form html goes here</div>
</div>

而 javascript 将是：

jQuery(document).ready(function(){
    jQuery('.slidedown').hide();
    jQuery('.whatever').hover(function(){//to show
        jQuery('.slidedown').show('effect', duration in millisecs);
    }, function(){//to hide
        jQuery('.slidedown').hide('effect', duration in millisecs);
    });
});

这使用 jQueryUI 来实现动画效果，但如果您只需要 div 向上或向下滑动，您也可以使用 .slideDown() 和 .slideUp() 方法

Answer 3

您需要将div.slidedown 嵌套在a.top-link-cart 中：

<a class="top-link-cart">Show login form
    <div class="slidedown">
        The login form HTML
    </div>
</a>

忽略标准（像 <div> 标签这样的块元素不应该真正嵌套在像 <a> 标签这样的内联元素中），这会起作用，因为当 div.slidedown 扩展时，父<a>.

这样，直到用户的鼠标离开<a>，mouseout 事件才会被触发。