jquery - 占据整个容器宽度的jQuery动画菜单下拉菜单

Question

我正在尝试编辑以下 jQuery 动画菜单，以便 subtext div 的宽度是绝对 600px，而不是相对于父菜单列表项的宽度。

点击这里获取代码

我尝试将绝对位置添加到 subtext 类，但没有奏效。

例如，当我将鼠标悬停在“关于”菜单项时，这就是我想要得到的。

非常感谢您的帮助。

Answer 1

• 使用 jQuery 动画演示
• 使用 CSS 过渡的演示   （在 IE9 和更早版本中没有动画）

以下是一些最重要的样式：

ul {
    list-style: none;     /* Get rid of bullets on li tags */
    position: relative;   /* Use relative position here, but not on li tags */
}
li {
    /* position: relative; */   /* Remove this style, to make all dropdown
                                   divs appear at the same location */
}
a {
    outline: none;   /* Get rid of outline on links */
}
.subtext {
    overflow: hidden;
    height: 0;
    position: absolute;
    z-index: 1;
}
li:hover .subtext {
    z-index: 2;   /* Make sure the active menu dropdown is on top */
}
/* Apply background color to both the li tags and the dropdown divs */
.green,  .green  .subtext { background-color: #6AA63B; }
.yellow, .yellow .subtext { background-color: #FBC700; }
.red,    .red    .subtext { background-color: #D52100; }
.purple, .purple .subtext { background-color: #5122B4; }
.blue,   .blue   .subtext { background-color: #0292C0; }

带有 CSS 过渡的版本添加了以下样式：

.subtext {
    -webkit-transition: height 0.6s;
       -moz-transition: height 0.6s;
            transition: height 0.6s;
}
li:hover .subtext {
    height: 200px;
}

两个演示都使用相同的 HTML 和大部分相同的 CSS。这两个版本都不需要编辑现有的 HTML。带有 CSS 过渡的版本不需要 jQuery。

Answer 2

这是实现此目的的一种方法：

position: relative;从 li 中删除，添加display: none;到height:0;.subtext

然后修改javascript代码如下：

//When mouse rolls over
$("li").mouseenter(function(){
    $('.subtext').hide(); // remove this for a fancier effect
    $(this).find('.subtext').css({backgroundColor: $(this).css('backgroundColor')})
    $(this).find('.subtext').stop().animate({height:'250px'},{queue:false, duration:600, easing: ''}).show()
});

//When mouse is removed
$("li").mouseleave(function(){
    $(this).find('.subtext').stop().animate({height:'0px'},{queue:false, duration:600, easing: ''}, function() {$(this).find('.subtext').hide()})
});

JsFiddle 演示