如何在打开bootstrap下拉菜单时切换按钮图标？

Question

我有一个bootstrap下拉列表，我想改变显示的图标(聋哑人)中的按钮，当我打开下拉菜单时(以 活动图标). 下面是代码。

<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或bootstrap功能来完成这个任务吗？

Answer 1

如果你的下拉列表得到类 open 当你打开它时，那么你应该更新你的选择器。

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

Answer 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");
}