jQuery功能切换引导程序图标栏动画不起作用

Question

我在切换按钮上设置了一个功能，以在单击时将Bootstrap图标栏转换为“ X”形。 但是，这似乎不起作用。 任何帮助是极大的赞赏。 按下它不会产生任何结果。 下面是一个简单示例的CSS栏。

 $(document).ready(function () { $(".pro-toggle").on("click", function () { $(".top-bar").toggleClass("active"); }); }); 

 .pro-toggle .active .top-bar { .pro-toggle.top-bar { transform: rotate(0); } transform: rotate(45deg); transform-origin: 10% 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="navbar-toggle collapsed pro-toggle pull-left" data-toggle="collapse"> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> 

Answer 1

.pro-toggle .active .top-bar

您的jQuery在.top-bar元素上切换了一个类，但它与CSS规则不匹配。

像这样将.active类设置为.active .top-bar元素

的CSS

.pro-toggle .top-bar {
  transform: rotate(0);
}
.pro-toggle .top-bar.active 
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

少/少

.pro-toggle .top-bar {
  transform: rotate(0);

  &.active {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
}

Answer 2

检查它https://jsfiddle.net/bq794gL7/可能是您的CSS问题？

  .pro-toggle.top-bar {
     transform: rotate(0);
  }

  .pro-toggle  .top-bar.active {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
   }