jquery - 悬停时，我没有看到我的 div 随着 parent 的自动高度向下滑动

Question

我有一个带有下拉菜单的菜单。悬停时，我想要一个带有 ID slider 的 div 向下滑动并让它占据父元素的高度

这是我的 fiddle :
http://jsfiddle.net/cancerian73/UzzAT/1/

#nav ul.subs {
    color: #333333;
    display: none;
    left: auto;
    position: absolute;
    top: 60px;
    width: 96%;
    /*padding-left:50%;
    margin-left:-405px;*/
    z-index: 9606;
}

Answer 1

如果你想将一个 Action 应用于多个元素，你应该使用类。

此外，您应该在鼠标输入功能内制作拉伸(stretch)动画。

$("#nav").mouseenter(function () {
    var $stretch = $(".slider");
    $stretch.animate({ height: $stretch.parent().height() }, 500 );
    $("this").find('.slider').stop(true,true).slideDown(500);
});

$("#nav").mouseleave(function () {
    var $stretch = $(".slider");
    $stretch.animate({ height: 0 }, 500 );        
    $("this").find('.slider').stop(true,true).slideUp(500);
});

或者，将 UL 放在 slider DIV 中，而不是像使用奇怪的掩码一样使用它。