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将被添加。这样，除非页面刷新或再次将其删除，否则它将保持“活动”状态。如上所述here

您可以做类似

的操作

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

或如@IvanS95所述：

如果满足以下条件，则可以定位.navbar-toggler[aria-expanded="true"]选择器您只想使用CSS而不创建任何自定义类

单击后如何使汉堡菜单按钮更改颜色？

3 个答案: