Jquery css转换属性未按预期在元素上工作

我有一个导航侧栏，它在点击按钮时展开，再次点击同一按钮时收缩

当导航栏折叠时，按钮上的文本显示展开>

当导航栏展开时，按钮上的文本显示为“折叠” 但是当我编写下面的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');

    }

无需更改jQuery代码或HTML。

您只需添加到#扩展，#折叠{：

writing-mode: vertical-rl;

：该属性定义文本行是水平排列还是垂直排列，以及块前进的方向

垂直lr：内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于前一行的右侧

在这种情况下，您需要更改：

transform: rotate(-90deg)

致：

因此，您的css类是：

#expand, #collapse{
   font-size: 0.8em;
   font-weight: bold;
   font-family: 'Ubuntu', serif;
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
   writing-mode: vertical-rl

}

$（文档）.ready（函数（）{
//最初，我希望侧栏折叠
$（'.option'）.addClass（'non-visible'）；
$（'.dropdown'）.slideUp（0）；
$（'side dropdown'）.slideUp（0）；
销钉（）；
$（“#按钮展开”）。单击（函数（）{
$（'.option'）.toggleClass（'non-visible'）；
销钉（）；
});
listItems=document.getElementsByTagName（“LI”）；
对于（i=0；i

.container fluid>.row>.col-md-12{
填充：0；
高度：100vh；
}
.左面板{
浮动：左；
身高：100%；
背景色：#34495e；
位置：相对位置；
}
#上榜{
列表样式：无；
/*浮动：左*/
填充：0；
}
#上表>李{
显示器：flex；
对齐项目：居中；
位置：相对位置；
/*边框：1px实心橙色*/
}
#上列表>li:n个子项（1）{
边缘顶部：0.5em；
边缘底部：2米；
}
#上方列表>li:悬停，
#下方列表>li:悬停{
光标：指针；
}
#上面的列表>li:悬停>div，
#上方列表>li:悬停>div>i，
#下列表>li:悬停>div，
#下列表>li:悬停>div>i{
颜色：#FFC300；
}
.用户图像容器{
宽度：4em；
显示器：flex；
证明内容：中心；
}
.用户图像{
高度：3em；
宽度：3em；
边框：2倍纯白；
边界半径：50%；
背景图像：url（'http://www.mrbeantvseries.co.uk/bean3.jpg');
背景尺寸：封面；
背景重复：无重复；
}
#人名{
字体大小：1.2米；
边缘底部：0px；
/*边框：1px纯色浅蓝色*/
}
.图标容器{
填料：0.6em2em；
浮动：左；
宽度：4em；
显示器：flex；
证明内容：中心；
/*边框：1px纯色天蓝色*/
}
.icon容器>i{
字体大小：1.2米；
颜色：白色；
}
.选择权{
填充物：0.5em 1em；
浮动：左；
字号：0.8em；
字体系列：“Ubuntu”，衬线；
颜色：白色；
/*边框：1px纯色天蓝色*/
}
.下拉列表{
列表样式：无；
填充：0；
宽度：100%；
}
.侧面下拉列表{
位置：绝对位置；
左：4em；
排名：0；
宽度：160px；
列表样式：无；
填充：0；
盒影：2px 2px 5px浅灰色，
2px-2px 5px浅灰色；
}
.下拉>李，
.侧面下拉列表>li{
填充：0.4em 1em；
字号：0.9em；
字体系列：“Ubuntu”，衬线；
背景色：#F7F7F7；
}
.下拉>李：悬停，
.侧面下拉列表>li:悬停{
背景颜色：浅灰色；
光标：指针；
}
#按钮展开{
/*位置：相对位置*/
身高：100%；
宽度：1.5em；/*需要包含展开文本*/
颜色：#807F7F；
边框：1px纯色浅灰色；
背景：线性梯度（向右，#c1c1，#f3）；
}
#按钮展开：焦点{
大纲：0；
}
#展开、#折叠{
字号：0.8em；
字体大小：粗体；
字体系列：“Ubuntu”，衬线；
-webkit变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
写入模式：垂直rl
}
.不可见{
显示：无；
}
#下表{
位置：绝对位置；
底部：0；
填充：0；
}
#下表>李{
页边距底部：0！重要；
浮动：左；
}
.广场{
宽度：0；
身高：0；
位置：绝对位置；
左：50%；
边框底部：0.5em实心透明；
边框顶部：0.4em实心#34495e；
左边框：0.4em实心透明；
右边框：0.4em实心透明；
}
.侧广场{
宽度：0；
身高：0；
位置：绝对位置；
顶部：1米；
边框底部：0.5em实心透明；
边框顶部：0.5em实心透明；
左边框：0.35em实心#34495e；
右边框：0.2米实心透明；
}

憨豆先生

mrbean@gmail.com


联络
transform: rotate(-90deg)

transform: rotate(-180deg)

#expand, #collapse{
   font-size: 0.8em;
   font-weight: bold;
   font-family: 'Ubuntu', serif;
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
   writing-mode: vertical-rl

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

} else {    // Expanded

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