Eu tenho uma lista suspensa de bootstrap e quero alterar o ícone exibido ( ícone-surdo ) no botão quando abro a lista suspensa (para ícone-ativo ). Aqui está o código:
<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;
}
Tentei usar .open > .icon-default {...}mas não funcionou. Eu estou fazendo a coisa certa? Existe uma maneira de fazer isso sem escrever novos scripts. Posso usar CSS existente ou funcionalidade de bootstrap para fazer isso?
Se sua lista suspensa receber a classe openquando você abri-la, você deve apenas atualizar seu seletor:
.open .icon-default {
content: url("path/path/hot.svg");
}
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras