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类（未打开）。 因此，如果要在打开导航栏图标时对其进行更改，则可以使用：

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

并在打开时进行更改：

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