克拉不会在第二次点击时旋转

Question

我为carat一个bootstrap 创建了一个旋转函数dropup.问题是当我关闭时它没有转换(旋转)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();
});

Answer 1

您需要在前面添加"旋转"类,这样当您切换类时,它会在添加另一个时删除它.您将在单击时添加两个类,然后在第二次单击时删除这两个类.

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