javascript - 通过单击另一个类启用/禁用特定类

Question

我想通过另一个类使用 jQuery 启用/禁用特定类。当我点击 .trigger-option 时，我想启用 class .bg-color。同时，如果我再单击一次，它将禁用该类 (.bg-color)。我怎样才能做到这一点 ？这是我的 html 和 css

$(document).ready(function() {
  $(".trigger-option").on("click", function() {
    $(".menu-content").toggle(400);
  })
})

body {
  background: url(../img/blur_content_img.jpg) no-repeat;
  background-repeat: no-repeat;
}
.logo {
  float: left;
  color: #FFFFFF;
}
.trigger-option {
  float: right;
  height: 50px;
  width: 50px;
  font-size: 25px;
  line-height: 50px;
  cursor: pointer;
  color: #FFFFFF;
}
.main-menu {} .menu-content {
  display: none;
}
.menu-content ul {
  list-style: outside none none;
  margin: 140px auto;
  padding: 0;
  text-align: center;
  width: 215px;
}
.menu-content ul li {} .menu-content ul li a {
  color: #FFFFFF;
  display: block;
  font-weight: normal;
  padding: 17px 0;
  text-decoration: none;
  font-size: 27px;
}
.menu-content ul li a:hover {} .bg-color {
  background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -10
}
.bg-color {
  background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -10
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-color"></div>
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="logo">VCODER</h2>
        <i class="fa fa-bars trigger-option"></i>
      </div>
    </div>
  </div>
</div>
<div class="main-menu">
  <div class="menu-content">
    <ul class="mainmenu">
      <li><a href="fa">About us</a>
      </li>
      <li><a href="#">Intro</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Contact us</a>
      </li>
    </ul>
  </div>

Answer 1

Working example .

当点击 trigger-option 时，你应该检查 wrapper 是否有类 bg-color 如果它有你应该的类删除它或者如果它没有那个类你应该添加它。

翻译成代码应该是这样的:

$(document).ready(function() {
    $(".trigger-option").on("click", function() {
        $(".menu-content").toggle(400);
        if( $(".wrapper").hasClass("bg-color") ){
            $(".wrapper").removeClass("bg-color");
        }
        else {
            $(".wrapper").addClass("bg-color");
        }
    })
})

body {
  background: url(../img/blur_content_img.jpg) no-repeat;
  background-repeat: no-repeat;
}
.logo {
  float: left;
  color: #FFFFFF;
}
.trigger-option {
  float: right;
  height: 50px;
  width: 50px;
  font-size: 25px;
  line-height: 50px;
  cursor: pointer;
  color: #FFFFFF;
}
.main-menu {} .menu-content {
  display: none;
}
.menu-content ul {
  list-style: outside none none;
  margin: 140px auto;
  padding: 0;
  text-align: center;
  width: 215px;
}
.menu-content ul li {} .menu-content ul li a {
  color: #FFFFFF;
  display: block;
  font-weight: normal;
  padding: 17px 0;
  text-decoration: none;
  font-size: 27px;
}
.menu-content ul li a:hover {} .bg-color {
  background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -10
}
.org-color {
  background-color: #ddd;
  background: #ddd;
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -10
}
.bg-color {
  background-color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: -10
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper org-color"></div>
<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="logo">VCODER</h2>
        <i class="fa fa-bars trigger-option"></i>
      </div>
    </div>
  </div>
</div>
<div class="main-menu">
  <div class="menu-content">
    <ul class="mainmenu">
      <li><a href="fa">About us</a>
      </li>
      <li><a href="#">Intro</a>
      </li>
      <li><a href="#">Services</a>
      </li>
      <li><a href="#">Contact us</a>
      </li>
    </ul>
  </div>