Question

单击navbar-toggle时，我需要帮助更改引导导航栏颜色。它不会工作。

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

Answer 1

以下是jsFiddle

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

在css中创建此类

.navbar-yellow{

    background-color: yellow !important;
}

它的导航栏默认值为灰色。

Answer 2

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

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


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

Answer 3

改变这个：

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

到此：

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

Bootstrap默认导航栏css可能会覆盖您要添加的导航栏。使用!important覆盖它。

Answer 4

引导程序 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

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

http://jsfiddle.net/rdx7j5a9/34/

单击nav-toggle时如何更改导航栏颜色

4 个答案: