jquery - css 转换属性无法按预期在元素上工作

Question

我有一个导航侧边栏，它会在单击按钮时展开并在再次单击同一按钮时收缩。

当导航栏折叠时，按钮上的文字显示为EXPAND >

当导航栏展开时，按钮上的文字显示COLLAPSE <

查看此 codepen link

问题是按钮上的文本“EXPAND”或“COLLAPSE”水平显示，而我希望它们像这样垂直显示。

我按照以下方式使用 CSS 变换属性将文本旋转 -90 度，最初效果很好。

#expand, #collapse{
    font-size: 0.8em;
    font-weight: bold;
    font-family: 'Ubuntu', serif;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

但是当我编写以下 Jquery 代码时，文本不再出现旋转。

if( $('.option').hasClass('non-visible') ){     // Collapsed

        $('.open-menu').css('display','unset');
        $('.close-menu').css('display','none');

    } else {    // Expanded

        $('.open-menu').css('display','none');
        $('.close-menu').css('display','unset');

    }

这是按钮的 HTML 代码:

            <button id="button-expand">
                <p id="expand" class="open-menu">EXPAND</p>
                <i class="fa fa-chevron-right open-menu" aria-hidden="true"></i>

                <p id="collapse" class="close-menu">COLLAPSE</p>
                <i class="fa fa-chevron-left close-menu" aria-hidden="true"></i>

                <p><!-- nothing --></p>
            </button>

需要Jquery代码在按钮上有选择地显示“EXPAND”或“COLLAPSE”(取决于导航栏是展开还是折叠)。

请告诉我我做错了什么。是否发生了某种冲突/压倒一切？

谢谢!

Answer 1

将 unset 值替换为空格 ""。当您使用 unset 时，样式看起来就像链式 react (也许是级联？)。无论如何，在 display:none 之间切换时，通常的做法是使用 "" 空白，因为这会触发默认的 display(initial )

CODEPEN

    $('.open-menu').css('display','');
    $('.close-menu').css('display','none');

} else {    // Expanded

    $('.open-menu').css('display','none');
    $('.close-menu').css('display','');