在悬停和导航栏切换折叠时更改颜色？

Question

我正在尝试重新制作：https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

问题是，我不想只是复制这个示例，我想通过更改某些部分来制作我自己的示例（在第一次 100% 重新制作之后）。

这是最终结果：https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage

如果您尝试使页面更小，您会看到导航栏变为一个按钮（由 3 个相互重叠的图标栏组成），您可以单击该按钮。现在我想更改此按钮，使其具有以下特征：

• 如果将鼠标悬停在其上，则背景应变为白色，3 个图标栏应变为橙色；
• 如果您单击该按钮，背景应变为白色，3 个图标栏应变为橙色。所以我想要的是当导航栏折叠时它应该有这个橙色/白色的配色方案。如果它没有折叠，它应该会恢复正常（除非它被悬停在上面）

问题是，我没有尝试过任何工作。

这是我的相关html：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#services">SERVICES</a></li>
                <li><a href="#portfolio">PORTFOLIO</a></li>
                <li><a href="#pricing">PRICING</a></li>
                <li><a href="#contact">CONTACT</a></li>
            </ul>
        </div>
    </div>
</nav>   

这是我的相关cs：

    .navbar {
        margin-bottom: 0;
        background-color: #f4511e;
        z-index: 9999;
        border: 0;
        font-family: Montserrat, sans-serif;
        font-size: 12px !important;
        letter-spacing: 4px;
        border-radius: 0;
    }

    .navbar li a, .navbar .navbar-brand {
        color: #FFFFFF !important;
    }

    .navbar-nav li a:hover, .navbar-nav li.active a {
        color: #f4511e !important;
        background-color: #FFFFFF !important;
    }

    .navbar-default .navbar-toggle {
        border-color: transparent;
        color: #ffffff;
    }

    .navbar-toggle:hover {
        background: white !important;
        color: #F4511e !important;
    }

    .navbar-toggle:focus {
        background: white !important;
        color: #F4511e !important;
    }

    .navbar-toggle:hover .icon-bar {
        background: #F4511e !important;
    }

    .navbar-toggle:focus .icon-bar {
        background: #F4511e !important;
    }

    .navbar-toggle .icon-bar {
        background: white !important;
    }

我遇到的最大问题是焦点没有做我想要的，因为当我单击按钮然后单击其他地方时，它会变回其标准配色方案。我明白为什么，因为它不再处于活动状态并且没有被悬停。

所以我需要一些像焦点这样的想法，但这与导航栏是否折叠有关。你们知道如何实现这一目标吗？

在网上搜索后，我发现了这个问题： how to change navbar color when nav-toggle is clicked

这与我的问题几乎相同，但我真的不明白 Alaksandar Jesus Gene 做了什么，我无法让它发挥作用。有人可以解释他做了什么（见下文）并帮助我理解我应该改变什么以使其在我自己的示例中起作用吗？

我不太明白的解决方案代码：

.navbar-yellow{

    background-color: yellow !important;
}

$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})

非常感谢任何帮助/想法。

提前致谢，

Answer 1

您可以在按钮上使用.toggleClass()。

我给按钮一个id 并使用jQuery 选择它。在单击按钮时将类is-active 添加到按钮。在您的 CSS 中，根据需要设置此类的样式。

fiddle

$(function() {
  var hamburger = document.getElementById('hamburger');

  $(hamburger).click(function() {
    $(this).toggleClass('is-active');
  })
})

.navbar {
  margin-bottom: 0;
  background-color: #f4511e !important;
  z-index: 9999;
  border: 0;
  font-family: Montserrat, sans-serif;
  font-size: 12px !important;
  letter-spacing: 4px;
  border-radius: 0;
}

.navbar li a,
.navbar .navbar-brand {
  color: #FFFFFF !important;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #f4511e !important;
  background-color: #FFFFFF !important;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
  color: #ffffff;
}

#hamburger .icon-bar {
  background: white;
}

#hamburger:hover,
#hamburger.is-active {
  background: white !important;
}

#hamburger:hover .icon-bar,
#hamburger.is-active .icon-bar {
  background: #F4511e !important;
}

#hamburger:focus {
  background: #F4511e;
}

#hamburger:focus .icon-bar {
  background: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar" id="hamburger">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#myPage">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#pricing">PRICING</a></li>
        <li><a href="#contact">CONTACT</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

好的，这是这个sn-p的细分：

$(".navbar-toggle").click(function(){
$("nav").toggleClass("navbar-yellow");
})

首先，jQuery 找到一个类为 .navbar-toggle 的元素（在本例中恰好是汉堡按钮），然后开始监听点击。

一旦检测到点击，jQuery 就会运行这个函数：

$("nav").toggleClass("navbar-yellow");

在该函数中，jQuery 首先找到 HTML 元素 nav（在本例中包含整个导航，即 <nav> 和 </nav> 之间的所有内容），然后在该 HTML 元素上切换类 navbar-yellow。

“Toggle”表示：jQuery 检查该特定类当前是否应用于该元素（导航）。如果 nav 目前确实有 navbar-yellow，那么 jQuery 会删除它。否则，jQuery 会将该类添加到nav 元素中。然后，当然，该 css 类将做它应该做的任何事情（在这种情况下将黄色应用于背景）。