【前端】angularJS或者jquery实现按钮点击变色，再点击变回来

目的：使按钮在两种状态之间切换，注意：简单的通过.修改focus和active的样式是做不到的。

效果图：

html代码：

 <div class="col-1">
   <button class="orderByTime" ng-click="changeDirection()">时间
   <img class="down" src="/onlyofficeeditor/images/paperList/down.png">//最开始显示
   <img class="up noDisplay" src="/onlyofficeeditor/images/paperList/up.png"></button>//最开始隐藏
</div>

js代码：

function paperListCtrl($scope, $http) {
    $scope.changeDirection = function() {
        if ($(".orderByTime").hasClass("my-btn-blue2")){//如果按钮是蓝色
            $(".orderByTime").removeClass("my-btn-blue2");//把蓝色去掉
            $(".up").addClass("noDisplay");//不显示向上的箭头
            $(".down").removeClass("noDisplay");//显示向下的箭头
        }else{//如果按钮不是蓝色
            $(".orderByTime").addClass("my-btn-blue2");//把蓝色加上
            $(".down").addClass("noDisplay");//不显示向下的箭头
            $(".up").removeClass("noDisplay");//显示向上的箭头
        }

    }
}

css代码：

.orderByTime{
  border: none;
  white-space:nowrap; /* 不换行 */
  margin-top: 2px;
}

button:focus {
    outline: none;/* 没有边框 */
}

.noDisplay{
  display: none; /* 隐藏*/
}