Question

I'm trying to change navbar color from white to blue and vice versa using toggle button.When i click on button it changes from white to blue but when i click another time it won't turn back to white color.

Here is my jQuery code.

$(".switch").click(function(){
    var numberOfClicks=0;
    numberOfClicks++;
    if(numberOfClicks%2 !=0){
    $("#nav-menu").css("background-color","blue");
    }else {
    $("#nav-menu").css("background-color","white");
    }

    });

And here is the code of toggle button

 <label  class="switch">
      <input  type="checkbox">
      <div class="slider" id="toggleButton"></div>
     </label>

Answer 1

You declare numberOfClicks inside your click handler. That means that every time the button is clicked, the variable is instantiated to zero again. It will always be 1.

Instead, do something like this:

var numberOfClicks=0;

$(".switch").click(function(){
    numberOfClicks++;
    if(numberOfClicks%2 !=0){
    $("#nav-menu").css("background-color","blue");
    }else {
    $("#nav-menu").css("background-color","white");
    }

    });

Answer 2

尝试我的回答，你可以切换类来改变背景颜色

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.blue{background-color:blue !important};
.white{background-color:white !important};
</style>

<body>

<div class="navbar navbar-preheader navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle white collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default</a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
<script>
$('.navbar-toggle').click(function(){
$('.navbar-toggle').toggleClass('blue white');
});
</script>
</body>
</html>

＆＃13;

Answer 3

1/3） - 您可以检查按钮是否被选中如果选中，则为蓝色，如果不是，则为白色：

$(document).ready(function(){

$(".switch").click(function(){
  var nav_menu = $("#nav-menu");
	if( $(this).children("input").prop("checked") ) {
	  nav_menu.addClass("blue");
	}
	else {
	  nav_menu.removeClass("blue")
	}
  });
});

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<label  class="switch">
<input  type="checkbox">
<div class="slider" id="toggleButton"></div>
</label>

<div id="nav-menu">nav-menu</div>

2/3） - 或者你可以知道元素是否具有类blue：

$(document).ready(function(){

$(".switch").click(function(){
    var nav_menu = $("#nav-menu");
    if( nav_menu.hasClass("blue") ) {
	    nav_menu.removeClass("blue")
    }
    else {
	    nav_menu.addClass("blue");
    }
  });
});

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<label  class="switch">
<input  type="checkbox">
<div class="slider" id="toggleButton"></div>
</label>

<div id="nav-menu">nav-menu</div>

3/3） - 或者使用类切换的最短路径：

$(document).ready(function(){

  $(".switch").click(function(){
    $("#nav-menu").toggleClass("blue");
  });
  
});

.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<label  class="switch">
<input  type="checkbox">
<div class="slider" id="toggleButton"></div>
</label>

<div id="nav-menu">nav-menu</div>

Function executes only once

3 个答案: