Carat не вращается при втором нажатии

Question

Я создал функцию поворота для carat с бутстрапа dropup. Проблема в том, что он не переходит (вращается), когда я закрываю dropup. Вот ссылка на мой кодекс. http://codepen.io/theMugician/pen/OyjYed Выпадение не закрывается и не открывается в кодефене. Просто обратите внимание на каратного

<div class="dropup" id="divDropup"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu text-left" aria-labelledby="dropdownMenu2"> 
     <li>PHONE</li>Stuff<li>{{basket.plan.phonePrice}}</li> 
     <li>MONTHLY PLAN</li><li>{{basket.plan.planPrice}}</li> 
     <li>ACCESSORIES</li><li>{{basket.accessoriesTotal}}</li> 
     <li>BUNDLE</li><li>{{basket.bundle.price}}</li> 
    </ul> 
</div> 
<footer id="cartFooter"> 
    <div class="row cartInfo"> 
     <div class="col-xs-4"> 
      <p><i class="zmdi zmdi-shopping-cart"></i> CART</p> 
     </div> 
     <div class="col-xs-4 text-center"> 
      <p>{{basket.total}}</p> 
     </div> 
     <div class="col-xs-4 text-right"> 
      <p><a ng-click="emptyBasket()"><span class="zmdi zmdi-delete"></span></a></p> 
     </div> 
    </div> 
</footer> 

CSS

.rotate { 
    transform: rotate(0deg); 
    transition: .3s; 
} 
.rotate2 { 
    transform: rotate(180deg); 
    transition: .3s; 
} 

JQuery

$(document).ready(function(){ 
    var $rotate = function(){ 
        $("#divDropup").on("click",function(){ 
         $(".caret").toggleClass("rotate"); 
         $(".caret").toggleClass("rotate2"); 
        }) 
       } 
       $rotate(); 
}); 

Answer 1

Вам нужно добавить класс 'поворот' фронт так, когда вы переключаетесь класс удаляет это при добавлении другого. Вы добавляете оба класса в клик, а затем удаляете оба класса во втором клике.

<span class="caret rotate"></span>