如何在移动设备的导航栏中显示两个不同的图标

Question

我有一个导航栏，我想在它折叠时显示栏图标，在打开时我想显示时间。我在 css 上试过了，但没用。

那你觉得我应该怎么做？

.navbar-toggler .fa-bars {
  display: initial;
}

.navbar-toggler.collapsed>.fa-times {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand heading-black" href="index.html"><img src="img/logo.png" class="logo" alt="Logo" />CineFi.Network</a>
  <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-times"></i>
    <i class="fas fa-bars"></i>
  </button>
</nav>

Answer 1

假设单击该按钮会将 class collapsed 添加到该按钮，我建议您这样做：

var button = document.querySelector('.navbar-toggler');

button.onclick = function() {
button.classList.toggle('collapsed');
}

.navbar-toggler .fa-bars {
display: initial;
}

.navbar-toggler .fa-times {
display: none;
}

.navbar-toggler.collapsed .fa-bars {
display: none;
}

.navbar-toggler.collapsed .fa-times {
display: initial;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand heading-black" href="index.html"><img src="img/logo.png" class="logo" alt="Logo" />CineFi.Network</a>
  <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-times"></i>
    <i class="fas fa-bars"></i>
  </button>
</nav>

.navbar-toggler .fa-bars {
display: initial;
}

.navbar-toggler .fa-times {
display: none;
}

.navbar-toggler.collapsed .fa-bars {
display: none;
}

.navbar-toggler.collapsed .fa-times {
display: initial;
}

如何在移动设备的导航栏中显示两个不同的图标

How to show two different icon in navbar in mobile

html

css

mobile

navbar