webapp制作简单筛选条、升序降序样式

<div class="filter">
        <ul>
            <li class="current">
                <a href="javascript:;">默认</a>
            </li>
            <li class="">
                <a href="javascript:;">数量</a>
            </li>
            <li class="arrow">
                <a href="javascript:;">价格</a>
            </li>
            <li class="">
                <a href="javascript:;">时间</a>
            </li>
        </ul>
    </div>

.filter ul li{float: left;width: 25%;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;background-color: #fff;}
.filter ul li.current{border-bottom: 2px solid #D24D56;margin-top: -1px;}
.filter ul li a{display: inline-block;width: 100%;height: 100%;text-align: center;line-height: 40px;position: relative;}
.filter ul li.arrow a:after{
    position: absolute;
    top: 19px;
    right: 10px;
    content: ‘‘;
    width: 9px;
    height: 5px;
    background-image: url(img/arrow.png);
    -webkit-transition:All 0.8s ease-in-out;
}
.filter ul li.arrow a.current:after{
     -webkit-transform:rotate(180deg);
}

$(‘.filter ul li‘).click(function() {
            $(this).addClass(‘current‘).siblings().removeClass(‘current‘);
        });

$(‘.filter ul li.arrow‘).toggle(function() {
            $(this).addClass(‘current‘);
            $(this).children(‘a‘).removeClass(‘current‘);
        }, function() {
            $(this).addClass(‘current‘);
            $(this).children(‘a‘).addClass(‘current‘);
        });