javascript - 如何将 jquery 变量值传递给 css 属性值？

Question

我想将 js 变量传递给 css 属性值，我试过了，但看起来很奇怪，

所以我不明白该怎么做。

$('.show-nav').click(function(){
    var text = $(this).text() == 'Toggle Navigation' ? 'Close' : 'Toggle Navigation';
    $(this).text(text);
    $('nav').toggleClass('show');
    navHeight = $('nav').css('height');
});
<style type="text/css">
    .show {
        height: //need js value here, assuming navHeihgt;
    }
</style>

非常感谢。

已更新

这是我在媒体查询中的CSS

@media only screen and (min-width: 150px) and (max-width: 800px){

 #nav {
    height:0;
    overflow:hidden;
    transition:height linear 500ms;
    -webkit-transition:height ease-in-out 500ms;
 }

 .show {
    height:auto !important;
    transition:height linear 500ms;
    -webkit-transition:height ease-in-out 500ms;
 }
}

你可以看到我的 #nav 没有隐藏 height:0;当点击事件被触发时，.show 类被分配给它，当它的高度回来时它会显示回来。

但它没有通过使用 auto 值分配来设置动画，但是当我选择任何其他特定值而不是 auto 时它会设置动画。但它不是使用自动值的动画，这就是我尝试这样做的原因。

Answer 1

您不需要在 CSS 中定义样式，您可以这样做:

$('.show').height(navHeight);

提供额外的解释 - 当用户点击 show-nav 类时，您的 nav 元素的高度将存储在 navHeight 变量。然后，您可以使用此 jQuery 将此高度应用于您的 show 类。