Jquery 单击导航切换时如何更改导航栏颜色

单击导航栏切换时，我需要更改引导导航栏颜色的帮助。它就是不起作用

$( ".navbar-toggle" ).click(function() {
$( ".navbar" ).css( "background","yellow" );
})

更改此项：

$( ".navbar" ).css( "background","yellow");

为此：

$( ".navbar" ).css( "background","yellow !important");

---

引导默认导航栏css可能会覆盖您正在添加的导航栏css。使用

！重要信息

覆盖它。

您应该创建一个自定义css类，并在用户与UI交互时添加它

//into your css file
.navbar.activated {
   background: yellow;
}


//into your js file
$( ".navbar-toggle" ).click(function() {
  $( ".navbar" ).addClass( "activated" );
});

这是你的电话号码

用css创建这个类

.navbar-yellow{

    background-color: yellow !important;
}

它的导航栏默认为灰色。

引导3

$(".navbar-toggle").click(function(event, c){
    $(event.target).addClass("disabled");
        $("nav").toggleClass("navbar-yellow");
    setTimeout(()=>{
        $(event.target).removeClass("disabled");
    },500);
})

或用于引导程序4和5

$(".navbar-toggler").click(function(event, c){
    $(event.target).addClass("disabled");
        $("nav").toggleClass("navbar-yellow");
    setTimeout(()=>{
        $(event.target).removeClass("disabled");
    },500);
})

CSS

---

奇怪……还是没什么。不行。“当使用.css（）作为setter时，jQuery修改元素的样式属性。”。内联样式优先于单独样式表中的所有其他样式（除非样式表中使用了

！important

规则）。如果使用的是bootstrap 4，则菜单按钮上的类是navbar toggler，而不是navbar toggle。

$(".navbar-toggler").click(function(event, c){
    $(event.target).addClass("disabled");
        $("nav").toggleClass("navbar-yellow");
    setTimeout(()=>{
        $(event.target).removeClass("disabled");
    },500);
})

.navbar-yellow {
  background-color: yellow !important;
}
.disabled {
  pointer-events: none;
}