原生JS手风琴式菜单子菜单显示与隐藏加上字符旋转效果

HTML页面

<nav id="divMain">
    <ul>
        <li onclick="clickLi(this)">
            <span>￥</span><!--图标-->
            <span>呵呵呵</span> <!--导航文字-->
            <i>A</i><!--箭头-->
            <div class="subMenue">
                <div>子菜单1</div>
                <div>子菜单2</div>
                <div>子菜单3</div>
            </div>
        </li>

        <li onclick="clickLi(this)">
            <span>￥</span><!--图标-->
            <span>呵呵呵</span> <!--导航文字-->
            <i>A</i><!--箭头-->
            <div class="subMenue">
                <div>子菜单1</div>
                <div>子菜单2</div>
                <div>子菜单3</div>
            </div>
        </li>

        <li onclick="clickLi(this)">
            <span>￥</span><!--图标-->
            <span>嘻 嘻 嘻</span> <!--导航文字-->
            <i>A</i><!--箭头-->
            <div class="subMenue">
                <div>子菜单1</div>
                <div>子菜单2</div>
            </div>
        </li>

        <li onclick="clickLi(this)">
            <span>￥</span><!--图标-->
            <span>哈哈哈 哈哈哈</span> <!--导航文字-->
            <i>A</i><!--箭头-->
            <div class="subMenue">
                <div>子菜单1</div>
            </div>
        </li>
        <li onclick="clickLi(this)">
            <span>￥</span><!--图标-->
            <span>嘿嘿嘿嘿嘿</span> <!--导航文字-->
            <i>A</i><!--箭头-->
            <div class="subMenue">
                <div>子菜单1</div>
                <div>子菜单2</div>
                <div>子菜单3</div>
                <div>子菜单4</div>
            </div>
        </li>

    </ul>
</nav>

                                                                         CSS样式

<style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            font-size: 14px;
            /*font-weight: bold;*/
        }

        body{
            background: rebeccapurple;
        }

        #divMain ul{
            width: 330px;
            margin: 0 auto;

        }

        li{
            background: whitesmoke;
            color: rebeccapurple;
            height: 45px;
            line-height: 45px;
            cursor: pointer;
            /*height: 180px;*/
            overflow: hidden;
            transition: all .3s;

        }

        li:not(:first-child){
            border-top:1px solid #ccc;
        }

        li:nth-child(1){
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        li:nth-child(5){
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

    /*    图标*/
        span:first-child{
            margin-left: 12px;
        }
    /*    文字*/
        span:nth-child(2){
            margin-left: 60px;
        }

    /*    箭头*/
        i{
            float: right;
            margin-right: 16px;
        }


    /*    子菜单*/

        li>div>div{
              color: whitesmoke;
              background: #734aa2;
                padding-left: 53px;
        }

        li>div>div:hover{
            background-color: darkred;
        }

</style>

                                                                        JS代码

<script>
    function clickLi(liClick){
        //当前点击的li下的i标签  ilist[0]=当前点击的Li下的箭头图标
        let iList=liClick.getElementsByTagName("i");
        let liList=document.getElementsByTagName("li");
        console.log(liClick.getElementsByTagName("div"))
        let divList=liClick.getElementsByTagName("div");



        if(liClick.style.height=="" ||liClick.style.height=="45px"){
            liClick.style.height=divList.length*45+"px";
            iList[0].style.transform="rotate(180deg)"
        }else{
            liClick.style.height=45+"px";
            iList[0].style.transform="rotate(0deg)"
        }

        for(let i=0;i<liList.length;i++){//i=0
            if(liList[i]!=liClick){//[li,li,li]
                liList[i].style.height="45px"
                liList[i].style.color="rebeccapurple"
                liList[i].getElementsByTagName("i")[0].style.transform="rotate(0deg)";
            }else{
                liList[i].style.color="darkred"
            }
        }

    }
</script>