当引导下拉菜单打开时如何切换按钮图标答案

【问题标题】：How to toggle button icon when a bootstrap dropdown is open当引导下拉菜单打开时如何切换按钮图标
【发布时间】：2020-04-29 08:13:20
【问题描述】：

我有一个引导下拉列表，我想在打开下拉列表时更改按钮中显示的图标（icon-deafult）（更改为 icon-active ）。代码如下：

<div id="Menu" class="dropdown">
  <a class="btn btn-default" id="MyButton" data-toggle="dropdown" role="button">
    <i class="icon-default"></i>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li>...</li>
    <li>...</li>
  </ul>
</div>

.icon-default {
  content: url("path/path/cool.svg");
  background-size: cover;
}
.icon-active {
  content: url("path/path/hot.svg");
  background-size: cover;
}

我尝试使用.open > .icon-default {...}，但没有成功。我做对了吗？有没有办法在不编写任何新脚本的情况下做到这一点。我可以使用现有的 CSS 或引导功能来完成这项工作吗？

【问题讨论】：

标签： html css twitter-bootstrap icons dropdown

【解决方案1】：

如果你的下拉菜单在你打开它时得到 open 类，那么你应该更新你的选择器：

.open .icon-default {
  content: url("path/path/hot.svg");
}

【讨论】：

是的，它确实获得了open 类。你的.open .icon-default 工作了！谢谢。我对 css 很陌生，所以你能告诉我为什么 .open > .icon-default 不适合我吗？ > 不需要吗？
> 选择器将匹配 .icon-default，它是 .open 元素的直接子元素。下拉菜单的直接子元素是 a 元素，而不是图标。

【解决方案2】：

Bootstrap 使用 area-expended 属性，因此您可以使用 [aria-expanded="false"] 关闭下拉菜单，使用 [aria-expanded="true"] 打开下拉菜单。

// When dropdown is closed
.dropdown > [aria-expanded="false"] > .icon-default {
    content: url("path/path/cool.svg");
}

// when dropdown is opened
.dropdown > [aria-expanded="true"] > .icon-default {
    content: url("path/path/hot.svg");
}

【讨论】：

【解决方案3】：

这对我有用

#navbarDropdownMenuLink[aria-expanded="true"]:after{
  content: url("path/path/hot.svg");
}

#navbarDropdownMenuLink[aria-expanded="false"]:after{
  content: url("path/path/cold.svg");
}

【讨论】：