Bootstrap 5 Accordion：使箭头旋转 90 度而不是 180 度答案

【问题标题】：Bootstrap 5 Accordion: make arrows rotate 90 degree instead of 180 degreeBootstrap 5 Accordion：使箭头旋转 90 度而不是 180 度
【发布时间】：2021-11-28 05:26:48
【问题描述】：

我创建了一个 Bootstrap 5 手风琴，就像这里 https://getbootstrap.com/docs/5.0/components/accordion/。默认情况下，当项目打开时（从“v”到“^”），箭头会旋转 180 度。但我希望箭头仅旋转 90 度（从 '>' 到 'v'）。

我试图通过交换变量值来操纵它：

在 _variables.scss 中，我设置了 $accordion-icon-transform: rotate(90deg);（而不是 bootstrap 5 默认的 $accordion-icon-transform: rotate(-180deg) !default;）我将箭头 svg 从“v”（bootstrap 5 默认）交换为“>”

结果是，在第一页加载时，箭头看起来像“v”（我想要一个“>”）。当我打开手风琴项目时，它显示一个“v”（正确）。然后我关闭它，箭头看起来像想要的'>'。但是我希望箭头在首页加载时显示“>”。

有没有办法实现这一点，只通过操纵引导变量？还是我必须在collapse.js之上多写一些JS？

【问题讨论】：

我认为你可以在css或scss中使用这段代码。 .accordion-button::after {rotate(-90deg) !important}
很遗憾，这不起作用。现在箭头总是向上显示'^'并且不再旋转了。
然后，添加.accordion-button::after {transform: rotate(-90deg) !important}和.accordion-button:not(.collapsed)::after {transform: rotate(-180deg) !important;}。

标签： javascript css bootstrap-5 bootstrap-accordion

【解决方案1】：

现在，我找到了一个纯 CSS 的解决方案：在我的自定义 style.scss 中，我添加了：

.accordion-button&[aria-expanded="false"]::after {
  transform: none;
}

【讨论】：