javascript - 如何更改汉堡包的背景颜色

Question

我试图将汉堡包的背景颜色从黑色更改为黄色，但没有成功。这是我的尝试:

//hamburger 
$(".hamburger").toggleClass("is-active");
var $hamburger = $(".hamburger");
  $hamburger.on("click", function(e) {
    $hamburger.toggleClass("is-active");
    // Do something else, like open/close menu
  });

.hamburger{
  background-color: yellow;
}

 <link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


 <button class="hamburger hamburger--emphatic is-active" type="button" id="clickme">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Answer 1

您不需要添加 !important 来更改颜色，您可以通过使用自定义父类(此处为 .hamburger 类)来定位内部子级。

这样做会覆盖 hamburger.css，而不使用重要的类，同时保持你的代码干净

.hamburger1 .hamburger-inner,
.hamburger1 .hamburger-inner::before,
.hamburger1 .hamburger-inner::after {
  background-color: yellow;
}

//hamburger 
$(".hamburger1").toggleClass("is-active");
var $hamburger1 = $(".hamburger1");
$hamburger1.on("click", function(e) {
  $hamburger1.toggleClass("is-active");
  // Do something else, like open/close menu
});



//hamburger 

var $hamburger2 = $(".hamburger2");
$hamburger2.on("click", function(e) {
  $hamburger2.toggleClass("is-active");
  // Do something else, like open/close menu
});

.hamburger1 .hamburger-inner,
.hamburger1 .hamburger-inner::before,
.hamburger1 .hamburger-inner::after {
  background-color: yellow;
}

.hamburger2.is-active .hamburger-inner,
.hamburger2.is-active .hamburger-inner::before,
.hamburger2.is-active .hamburger-inner::after {
  background-color: yellow;
}

<link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<button class="hamburger hamburger1 hamburger--emphatic is-active" type="button" id="clickme">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

<h3>If u want on click</h3>

<button class="hamburger hamburger2 hamburger--emphatic " type="button" id="clickme2">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>