克拉不旋轉第二次點擊

我從引導dropup創建了carat的旋轉功能。問題是，當我關閉dropup時，它不會轉換（旋轉）。這裏是我的codepen的鏈接。 http://codepen.io/theMugician/pen/OyjYed Dropup沒有關閉並在codepen中打開。只是要注意克拉克拉不旋轉第二次點擊

<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(); 
});

來源

2015-10-13 Grzes Slania