JQ效果实现价格箭头默认灰色，点击向上高亮，再点击向下高亮，求大神指点

图片描述

网页地址：https://list.lu.com/list/touzi?minMoney=&maxMoney=&minDays=&maxDays=&minRate=&maxRate=&mode=&subType=&instId=&haitongGrade=&fundGroupId=&searchWord=&trade=&isCx=&currentPage=1&orderType=default&orderAsc=true

如果只是一个按钮，用toggle()方法可以实现一个，但是按钮有好几个的情况就不行，上面链接就是想要实现的效果，求大神能够指点一下，在此先谢过了~~~

我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
.cl:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.cl{ zoom:1;}
.fl{ float:left;}
.fr{ float:right;}
/*小三角*/
.arrow{ position:absolute; display:inline-block; width:0; height:0; border-color:#475058; border-width:5px; overflow:hidden; font-size:0;}
.arrow_up{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #475058;border-style:dashed dashed solid;}
.arrow_down{ border-color:#475058 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);border-style: solid dashed dashed;}
.arrow_left{ border-color: rgba(0, 0, 0, 0) #475058 rgba(0, 0, 0, 0)  rgba(0, 0, 0, 0);border-style:dashed solid dashed dashed;}
.arrow_right{ border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)  rgba(0, 0, 0, 0) #475058;border-style:dashed dashed dashed solid;}

.sort-box{ margin:100px;}
.sort-list{ overflow:hidden;}
.sort-list a{ display:inline-block; padding:3px 30px 3px 17px; background-color:#FBFBFB; border:1px solid #dcdcdc; position:relative; min-width:51px; line-height:18px; margin-right:10px; float:left; text-decoration:none; color:#333;}
.sort-list a:hover,.sort-list a.active{ text-decoration:none; color:#ff0000;}
.sort-list a .arrow{ border-color:#dcdcdc; right:7px;}
.sort-list a .arrow_down{ border-color:#dcdcdc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); top:14px;}
.sort-list a .arrow_up{ border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #dcdcdc; top:2px;}
.sort-list a .arrow_down_active{ border-color:#ff0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);}
.sort-list a .arrow_up_active{ border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ff0000;}
</style>
</head>

<body>
    <div class="sort-box mgb10 cl">
          <div class="sort-list fl">
              <a href="javascript:;"><i class="arrow arrow_down"></i><i class="arrow arrow_up"></i>年化收益</a>
              <a href="javascript:;"><i class="arrow arrow_down"></i><i class="arrow arrow_up"></i>项目规模</a>
              <a href="javascript:;"><i class="arrow arrow_down"></i><i class="arrow arrow_up"></i>项目期限</a>
          </div>
    </div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".sort-list a").toggle(
    function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".sort-list a").find("i").removeClass("arrow_up_active arrow_down_active");
        $(this).find(".arrow_up").addClass("arrow_up_active");
        },
    function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(".sort-list a").find("i").removeClass("arrow_up_active arrow_down_active");
        $(this).find(".arrow_down").addClass("arrow_down_active");
        });
});
</script>
</body>
</html>

想实现的效果是点击的时候箭头都是向上高亮，我现在遇到的问题是：第一个点击向上高亮，然后去点击第二个，再回来点击第一个，第一个是向下高亮了