單擊后如何使漢堡菜單按鈕更改顏色？

Question

我正在與Bootstrap合作，並試圖讓基本的漢堡菜單按鈕一旦單擊便更改背景顏色。 檢查顏色后，我可以在瀏覽器中進行更改，但是無法在CSS中復制顏色。 我也無法僅在單擊時更改顏色。 我相信這可能是一個特異性問題。 漢堡包按鈕來自自舉示例之一。

下面的導航欄被編碼為在左上角顯示“ Food，LLC”，並且所有其他鏈接都將被隱藏，直到寬度減小到769px。 當點擊769px寬度時，將顯示“漢堡包”按鈕。 單擊該按鈕后，鏈接將顯示為下拉列表。

我以紅色為背景色為例，但任何顏色變化都將受到贊賞！

我嘗試對navbar-toggler類盡可能具體，以查看是否可以更改它，但不能更改。 這是在chrome上測試的。

另外，我嘗試使用“：active” css屬性沒有運氣。

 @media (min-width: 769px) { button { display: none; background-color: red; } .navbar-brand>.navbar-toggler{ background-color: red !important; } .navbar-toggler:active{ background-color: red; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-collapse-md navbar-dark bg-dark" id="button"> <a class="navbar-brand" href="index.html">Food, LLC</a> <button class="navbar-toggler" id="navbarToggleExternalContent active" type="button" data-toggle="collapse" data- target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse active" id="navbarNav"> <ul class="navbar-nav" id="color"> <li class="nav-item"> <a class="nav-link" href="chicken.html">Chicken</a> </li> <li class="nav-item"> <a class="nav-link" href="beef.html">Beef</a> </li> <li class="nav-item"> <a class="nav-link" href="sushi.html">Sushi</a> </li> </ul> </div> </nav> 

Answer 1

如果只想使用CSS而不創建任何自定義類，則可以定位.navbar-toggler[aria-expanded="true"]選擇器。

如果您檢查頁面，這要歸功於Bootstrap的JS，每當您單擊按鈕時， aria-expanded屬性都會在true和false之間切換，因此您可以利用此優勢。

 .navbar-toggler[aria-expanded="true"] { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-collapse-md navbar-dark bg-dark" id="button"> <a class="navbar-brand" href="index.html">Food, LLC</a> <button class="navbar-toggler" id="navbarToggleExternalContent active" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse active" id="navbarNav"> <ul class="navbar-nav" id="color"> <li class="nav-item"> <a class="nav-link" href="chicken.html">Chicken</a> </li> <li class="nav-item"> <a class="nav-link" href="beef.html">Beef</a> </li> <li class="nav-item"> <a class="nav-link" href="sushi.html">Sushi</a> </li> </ul> </div> </nav> 

Answer 2

使用jQuery並在點擊時切換活動類。

腳本

<script>
$(document).ready(function(){
  $('.navbar-dark .navbar-toggler').click(function(){
    $(this).toggleClass('active');
  });
});
</script>

CSS

<style>
  .navbar-brand>.navbar-toggler.active{
    background-color: red;
  }
</style>

Answer 3

不確定是否要更改圖標或背景。

要更改圖標，這對我有用（盡管將在一秒鍾內取消選擇活動狀態）：

.navbar-dark .navbar-toggler-icon:active {
    background: red !important; // will replace the icon image with a red square
}

更改背景：

.navbar-dark .navbar-toggler:active {
    background: red;
}

理想情況下，一個類將在單擊時切換.navbar-toggler 。 當用戶點擊它如active將增加。 這樣，除非頁面刷新或再次將其刪除，否則它將保持“活動”狀態。 正如這里提到的

你可以做類似的事情

.navbar-dark .navbar-toggler.active { //note the change from : to .
    background: red;
}

或如@ IvanS95所述：

如果您只想使用CSS而不創建任何自定義類，則可以定位.navbar-toggler[aria-expanded="true"]選擇器