javascript - jQuery Function to Toggle Bootstrap Icon Bar Animation Does Not Work -

i have set function on toggle button transition bootstrap icon bars "x" shape on click. however, not seem work. appreciated. pressing result in nothing. below css of 1 bar simple example.

$(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>

.pro-toggle .active .top-bar

your jquery toggling class on .top-bar element doesn't match css rule.

set .active class .top-bar element this

css

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

less / sass

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