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

这部分经常在列表的筛选显示时被见到

如下所示

html部分很简单

<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>

然后使用css稍加美化，curent类用来表示当前选中样式状态，其中价格后面的箭头可以用伪类添加

.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);
}

之后需要做的就是借助jquery来实现

首先考虑通过jquery改变选中li的样式改变

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

然后实现“价格”部分的箭头旋转

这里通过给特殊类 arrow 中的a元素添加current类 或 去除current类来实现箭头的旋转

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

最终实现想要的效果！

如果你有其他实现方法也请给我留言！

good  good  study， day  day  up！