Question

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

我正在尝试解决CSS过渡0 /自动问题。

这是我的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')检索的值之间的height属性？

我想尽量缩短它。我希望有一种方法，所以我不需要使用if语句来检查height属性的值。

注意：.toggleClass在这种情况下无用。

Answer 1

试试这个：

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

jQuery切换css属性值（不是类）？

1 个答案: