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：

＆＃13;

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

＆＃13;

这是我的相关cs：

＆＃13;

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

＆＃13;

我遇到的一个大问题是焦点并没有做我想要的事情，因为当我点击按钮然后点击其他地方时，它会变回其标准配色方案。我理解为什么，因为它不再活跃而且不会被徘徊。

所以我需要一些像焦点一样的思考，但这与导航栏被折叠或者没有关联。你们有任何想法如何实现这一目标吗？

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

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

我不太了解的解决方案代码：

＆＃13;

.navbar-yellow{

    background-color: yellow !important;
}

＆＃13;

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

＆＃13;

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

提前致谢，

Answer 1

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

我已经给了id按钮，并用jQuery选中了它。单击按钮后，将类is-active添加到按钮。在CSS中，根据需要设置此类的样式。

fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

好的，这是这个片段的细分：

.navbar-toggle

首先，jQuery找到一个具有类$("nav").toggleClass("navbar-yellow");的元素（在这种情况下恰好是汉堡包按钮），然后开始监听点击。

一旦检测到点击，jQuery就会运行此功能：

nav

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

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

悬停时以及折叠导航栏切换时更改颜色？

2 个答案: