不使用字体图标和图片，只使用css如何做出展开收起的效果

<i class="iconArrow" :class="[ littleNavState === item.meta.id ? ‘arrowOpen‘ : ‘‘ ]"></i>

默认效果

.iconArrow {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.iconArrow::before,
.iconArrow::after {
    position: absolute;
    width: 6px;
    height: 1.5px;
    background: #fff;
    background: rgba(0, 0, 0, 0.65) \9;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65));
    background-image: none \9;
    border-radius: 2px;
    -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: ‘‘;
}
.iconArrow::before {
    -webkit-transform: rotate(45deg) translateY(-2px);
    -ms-transform: rotate(45deg) translateY(-2px);
    transform: rotate(45deg) translateY(-2px);
}
.iconArrow::after {
    -webkit-transform: rotate(-45deg) translateY(2px);
    -ms-transform: rotate(-45deg) translateY(2px);
    transform: rotate(-45deg) translateY(2px);
}
.nav > li:hover .iconArrow::after,
.nav > li:hover .iconArrow::before {
    background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff));
    background: linear-gradient(to right, #1890ff, #1890ff);
}
.iconArrow::before {
    -webkit-transform: rotate(-45deg) translateX(2px);
    -ms-transform: rotate(-45deg) translateX(2px);
    transform: rotate(-45deg) translateX(2px);
}
.iconArrow::after {
    -webkit-transform: rotate(45deg) translateX(-2px);
    -ms-transform: rotate(45deg) translateX(-2px);
    transform: rotate(45deg) translateX(-2px);
}

收起效果

.iconArrow.arrowOpen {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}
.iconArrow.arrowOpen::after {
    -webkit-transform: rotate(-45deg) translateX(-2px);
    -ms-transform: rotate(-45deg) translateX(-2px);
    transform: rotate(-45deg) translateX(-2px);
}
.iconArrow.arrowOpen::before {
    -webkit-transform: rotate(45deg) translateX(2px);
    -ms-transform: rotate(45deg) translateX(2px);
    transform: rotate(45deg) translateX(2px);
}