0

我有一个带有下拉菜单的菜单。在悬停时，我希望一个带有 ID 滑块的 div 向下滑动并让它占据父级的高度

这是我的小提琴：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;
}
4

2 回答 2

0

这是可以做到的。

首先，删除 CSS 中的每个 :hover 语句。

然后，我添加以下 jQuery：

$("#nav li").not('.subs li').mouseenter(function () {


    if ($(".slider").is(":visible")) {

        $(".slider").stop(false, false).animate({
            height: $(this).find('.subs').height() + "px"
        }, 500)
        $(this).find('.subs').show();
    } else {

        var subHeight = $(this).find('.subs').height();
        $(".slider").css({
            "height": subHeight + "px"
        })
        $(".slider").stop(false, false).slideDown(500);
        $(this).find('.subs').show();
    }

})

$("#nav li").mouseleave(function () {

    $(this).find('.subs').hide();
})

$("#nav").mouseleave(function () {
    $(".slider").stop(false, true).delay(500).slideUp(500);
})

我添加了 IF 以检查滑块是否必须显示或仅动画。我还为 #nav 添加了一个 mouseleave 处理程序，以防止您的滑块在项目之间跳转。并添加了延迟（）以实现流畅的动画。

我还更改了 css ：

#nav ul.subs {
    color: #333333;
    display: none;
    left: auto;
    position: absolute;
    top: 40px;
    width: 96%;
    z-index: 9606;
}

看看小提琴

于 2013-10-07T13:41:57.427 回答
0

如果您想将一个操作应用于多个项目，您应该使用类。

此外，您应该在鼠标输入功能中进行拉伸动画。

$("#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 放在滑块 DIV 中，而不是像奇怪的掩码一样使用它。

于 2013-10-07T13:17:23.683 回答