如何在移動設備的導航欄中顯示兩個不同的圖標

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

假設單擊該按鈕會將collapsed的 class 添加到該按鈕，我建議您這樣做：

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