css - BS 4 切换图标交换

Question

有谁知道如何在使用 css 打开或关闭时更改 bootstrap 4 navbar-toggler-icon？我认为这很简单，但我真的找不到任何东西。

.map-controls-mobile .navbar-toggler-icon {
    background-image: url('img/mobile-controls-arrow.svg');
    width: 24px;
}

Answer 1

如果您注意到，navbar-toggler-icon 在折叠(未打开)时将具有 .collapsed 类。因此，如果您想在打开时更改 navbar-toggler-icon，您可以使用:

button.navbar-toggler.collapsed {
  /* my css code */
}

并在打开时更改它:

button.navbar-toggler:not(.collapsed) {
  /* my css code */
}