我试图将汉堡包的背景颜色从黑色更改为黄色,但没有成功。 这是我的尝试:
//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>
最佳答案
您不需要添加 !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>
关于javascript - 如何更改汉堡包的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50266142/