Question

当有人在一个链接上盘旋时，我试图让div下降。 div里面是一个登录表单。以下代码仅适用于如果我将鼠标悬停在链接上，则div会出现。但是，当我将鼠标从链接向下移动到div上时，div会立即缩回。请参阅：

jQuery(document).ready(function() {
    jQuery('.slidedown').hide(); 
    jQuery('a.top-link-cart').hover( function(){ // enter animation

    jQuery('.slidedown').stop(true,true).animate({
        height: ['toggle', 'swing'],
        }, 600, function() { /* animation done */ });

    }, function(){ // leave animation

jQuery('.slidedown').mouseout( function() {
   setTimeout( function(){
      jQuery('.slidedown').stop(true,true).animate( {
          height: '0px'}, 600, function(){});}, 200 ); // setTimeout ends here
}); // mouseout ends here
    });
});

如果用户将鼠标从链接移到div而关闭，如果用户将鼠标从链接移开但不移入div并且c）关闭，如果用户移动，那么我想要实现的就是拥有div a）保持打开状态小鼠出了div。我认为.mouseout函数会保持div打开，这样我至少可以将鼠标移到它上面但它不起作用。有任何想法吗？我非常感激这对我来说已经让我头疼了一个星期了。感谢。

Answer 1

你不应该使用.hover而是.mouseover（）代替第一种方法。

Answer 2

您需要将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>标记），这将起作用，因为{{1} }扩展，父div.slidedown也是如此。

这样，在用户的鼠标离开<a>之前，不会触发mouseout事件。

希望这有帮助。

Answer 3

您可以将链接和执行动画的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作为动画效果，但你可以使用.slideDown（）和.slideUp（）方法，如果你需要的只是要向上或向下滑动的div

jquery dropdown div不太正常

3 个答案: