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%;
   }