Jquery将css应用于第二类

Question

我有一些变量高的元素（dep。on content）

说div.container

我想让它与css动画一起折叠。

首先得到最初的高度：

var mnh = $('.container').outerHeight();

然后我将hight设置为css（使css动画工作）

$('.container').css('height' , mnh + 'px');

并且我将元素设置为折叠状态

$('.mobile-navigation').addClass('collapsed');

虽然我有

.container.collapsed{
 height: 50px;
}

在我的CSS中

我想用

改变状态

$('.my-control').on('click',function(e){
    e.preventDefault();
    $('.container').toggleClass('collapsed');
})

但它不起作用，因为，据我所知，当我通过jquery设置高度为元素时，它将初始高度设置为折叠而不是，并覆盖我的css中的高度：50px属性。

我该如何解决？