jQuery添加.active类时CSS不响应

Question

当我按下切换按钮时，jquery将'.active'类添加到'.sidebar-contact'，然后在CSS .sidebar-contact.active中应该激活，但是什么也没发生。

CSS

.sidebar-contact{
 position: fixed;
 transform: translateY(-50%);
 top: 50%;
 left: -350px;
 width: 350px;
 height: auto;
 padding: 20px;
 background: #fff;
 box-sizing: border-box;
 transition: .5s;

 }
 .sidebar-contact.active
 {
   left:0px;

 }
 .toggle{
 position: absolute;
 top: 0;
 right: -48px;
 width: 48px;
 height: 48px;
 line-height: 48px;
 cursor: pointer;
 text-align: center;
 background: #f00;
 }

jQuery

 $(document).ready(function(){
   $('.toggle').click(function(){
    $('.sidebar-contact').toggleClass('.active')
   });
 });

Answer 1

您需要在.中的类定义之前删除toggleClass：

$('.toggle').click(function(){
  $('.sidebar-contact').toggleClass('active')
});

.sidebar-contact {
  background: blue;
  height: 200px;
  width: 200px;
}

.sidebar-contact.active {
  background: green;
}

button { margin-top: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sidebar-contact"></div>
<button class="toggle">Toggle</button>