Как переключать значок кнопки при открытом раскрывающемся списке bootstrap

Question

У меня есть раскрывающийся список bootstrap, и я хочу изменить отображаемый значок ( 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 или bootstrap, чтобы сделать это?

Answer 1

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

Answer 2

Если ваш раскрывающийся список получит класс open, когда вы откроете его, то вам просто нужно обновить селектор:

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