Question

我正在尝试为顶部导航按钮进行移动响应式设计。当用户点击汉堡包按钮时，我有这个问题，背景颜色将变为橙色，其颜色代码为＃e2ae15，颜色为红色。

当用户再次点击时，它将变回默认颜色，即＃e2ae15的颜色代码。

我可以知道如何改变颜色。我尝试了很多方法，例如使用名为active和focused的css，但是没有一种方法可以使它成为理想的结果。我能找到的最好的例子之一是这个网站：https://sutd.edu.sg/但必须处于移动模式

HTML：

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="container">
      <!-- Static navbar -->

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id"a">
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>
</div> <!-- /container -->

CSS：

.navbar-toggle {
  border: none;
  //background: transparent !important;
    border: 0;
    float: left;
    padding: 18px;
    margin: 0;
    border-radius: 0;
    background-color: #e2ae15 !important;
  cursor:pointer


  /*&:hover {
    //background: transparent !important;
    background: #e2ae15 !important;
  }*/


  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }

  &.collapsed {
    .top-bar {
      transform: rotate(0);      
    }
    .middle-bar {
      opacity: 1;
    }
    .bottom-bar {
      transform: rotate(0);
    }
  }
}


.red{
  background-color:red;
 }

Answer 1

在self标记中添加一个类（名为 my-class ），这样您就不需要重要了。然后使用该类来定位按钮。将此添加到您的CSS

nav

这将覆盖bootstrap的默认样式。当抽屉打开时，.my-class.navbar-default .navbar-toggle, .my-class.navbar-default .navbar-toggle:hover { background-color: red; } .my-class .navbar-toggle.collapsed, .my-class .navbar-toggle.collapsed:hover{ background-color: orange; }类被移除，然后您可以定位导航栏切换类。

更新了代码集link

尝试将汉堡包按钮的背景颜色更改为其他颜色，然后再次单击它会将其更改为与unlick相同的颜色

1 个答案: