Question

我试图创建一个带过渡的简单菜单。当您单击菜单项时，它应该以CSS过渡打开，但我猜测我错过了什么。我的CSS课程是：

.container {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.6s;
}

.container div {
    font-size: 13px;
    padding: 5px;
}

.ShowSubMenu {
    height: initial !important;
}

仅在单击外部菜单项时才应用ShowSubMenu。请在此处查看一个有效的示例：http://jsfiddle.net/CwmTZ/

如果将ShowSubMenu的height属性切换为常数，则转换将很好地工作。问题是，我不知道我将拥有多少个子菜单项，它必须是动态的。

谢谢！

Answer 1

此值：height: initial !important;不适用于CSS。您只能转换数值。

您可以像this：

一样解决它

.container {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.6s;
}

.ShowSubMenu {
    background: #f00;
    max-height: 200px; /* Something bigger than menu */
    height: initial;
}

Fiddle

Answer 2

我创建了一个函数来计算container元素的总高度。

<强> JS

$(function() {
    $('.Menu').on('click',function() { 
        if ($('.container').hasClass('ShowSubMenu'))
            $('.container').height(findHeight());
        else
            $('.container').height(findHeight());
    });
});

function findHeight(){
    var sumHeight = 0;
     $('.container').children().each(
         function(){
             sumHeight += $(this).outerHeight();
         });
    return sumHeight;
}

fiddle

菜单中有更多项目的示例：

fiddle

CSS过渡不适用于height属性

2 个答案: