Question

我从引导程序carat为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

您需要添加班级＆＃39;旋转＆＃39;在前面，所以当你切换类时，它会在添加另一个时删除它。您在点击时添加了两个类，然后在第二次单击时删除了这两个类。

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

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

1 个答案: