Bootstrap 4下拉菜单激活状态下如何实现箭头图标向上旋转？

无需修改你现有的HTML结构，仅需添加对应CSS代码即可实现效果，实现逻辑基于Bootstrap原生的状态属性，不需要额外编写JS交互。

步骤1：添加CSS样式 #

/* 为默认下拉箭头添加平滑过渡效果 */
.dropdown-toggle::after {
  transition: transform 0.3s ease;
}
/* 匹配下拉展开状态，将箭头旋转180度朝上 */
.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

可选：补全下拉功能依赖 #

如果你的下拉菜单目前无法正常展开，需要在页面底部引入Bootstrap4的JS依赖：

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

实现说明 #

Bootstrap 4的下拉组件会自动切换触发按钮的aria-expanded属性：菜单收起时属性值为false，展开时自动更新为true，直接基于该属性做样式匹配即可，逻辑简单且无额外性能开销。

内容的提问来源于stack exchange，提问作者Kate