相关css代码

.spanRotate {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transition: transform .5s;
}

.spanReset {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform .5s;
}

相关html代码

<div class='frequentlyQuestions'>
    <div class='frequentlyQuestionsDesc'>
        <div class="redMarker">
        </div>
        <strong style="padding-left:3px;">下面是大家常温的问题呦~</strong>
    </div>
    <div class='frequentlyQuestionsContent'>
        <div class='frequentlyQuestionListBig' onclick='frequentlyQuestionListClick(0,this)'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine' >账号（认证、换绑、登录） <span id='spanStatus' class='iconfont icon-xialajiantou'></span>
            </div>
            <div id='smallList'  class='smallList0'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>  如何进行营业执照认证</span>
            </div>
            <div id='smallList' class='smallList0'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>如何找到手机号</span>
            </div>
            <div id='smallList' class='smallList0'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>密码玩了个怎么玩</span>
            </div>

        </div>
        <div class='frequentlyQuestionListBig' onclick='frequentlyQuestionListClick(1,this)'>
            <div class='frequentlyQuestionList frequentlyQuestionsLine'>信息问题（被删除、不显示） <span id='spanStatus' class='iconfont icon-xialajiantou'></span></div>
            <div id='smallList' class='smallList1'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>如何找到手机号</span>
            </div>
        </div>

        <div class='frequentlyQuestionListBig' onclick='frequentlyQuestionListClick(2,this)'>
            <div class='frequentlyQuestionList'>其他问题（毛用、举报） <span id='spanStatus' class='iconfont icon-xialajiantou'></span></div>
            <div id='smallList' class='smallList2'>
                <div class='grayMarker'></div>
                <span style='padding-left:3px;'>举报一个诈骗用户</span>
            </div>
        </div>
    </div>
</div>

相关JS代码

  function frequentlyQuestionListClick(obj, that) {
        console.log("点击了" + obj + $(that).find(".smallList" + obj.toString()).css("display"));
        if ($(that).find(".smallList" + obj.toString()).css("display") == "none") {
            $(that).find(".smallList" + obj.toString()).css("display", "flex");
            $(that).find("#spanStatus").removeClass("spanReset").addClass("spanRotate");
        } else {
            $(that).find(".smallList" + obj.toString()).css("display", "none");
            $(that).find("#spanStatus").removeClass("spanRotate").addClass("spanReset");
        }


    }

初始状态

初始状态.png

账号点击-右侧箭头发生旋转

账号点击-右侧箭头发生旋转.png

信息问题点击-箭头旋转

信息问题点击-箭头旋转.png

再次点击账号一行-箭头复位

再次点击账号一行-箭头复位.png

动画效果

101.175526.gif