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>