单击另一个类启用/禁用特定类

时间：2015-07-05 12:21:39

标签： javascript jquery html css

我想通过另一个类使用jQuery启用/禁用特定的类。当我点击.trigger-option时，我想启用类.bg-color。同时，如果我再次单击它将禁用该类（.bg-color）。我怎样才能做到这一点 ？这是我的html＆amp; 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>

2 个答案:

答案 0 :(得分：2)

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>

答案 1 :(得分：1)

像这样添加另一个类和bg-color 

<div class="item bg-color"></div>

根据班级项目，可以使用.toggleClass()这样切换班级bg-color 

$(".trigger-option").on("click", function() {
    $(".item").toggleClass("bg-color");
    $(".menu-content").toggle(400);
})


$(document).ready(function() {
  $(".trigger-option").on("click", function() {
    $(".item").toggleClass("bg-color");
    $(".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="item bg-color">this is item</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">this is 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>

相关问题
最新问题