jQuery 切换 css 属性值(不是类)？

Question

在两个值之间切换 css 属性值的最短方法是什么？

我正在尝试解决 CSS transition 0/auto 问题。

这是我的 JS:

jQuery(document).ready(function($) {

    var height = $('#menu').prop('scrollHeight');

    $("#toggle").click(function() {
        $("#menu").css('height', height);
    });

})

这是我的 CSS:

#toggle {
    float: right;
    padding: 10px;
}

#menu {
    display: block;
    height: 0;
    overflow: hidden;
    float: none;
    clear: both;
    transition: height 1s ease 0.2s;
}

它适用于打开菜单。但它当然不会关闭菜单。

是否有切换 CSS 属性的功能？在 0 和使用 .prop('scrollHeight') 检索到的值之间切换高度属性的单个函数？

我希望它尽可能短。我希望有一种方法，这样我就不需要使用 if 语句来检查 height 属性的值。

注意:.toggleClass 在这种情况下没有用。

Answer 1

试试这个:

$("#toggle").click(function() {
    if($('#menu').height() != height){
        $("#menu").css('height', height);
    }
    else{
        $("#menu").css('height', '0px');
    }
});