jQuery实现二级菜单和箭头旋转

一直想写技术性博客，一直都没下手。
二级菜单的箭头一直懒得改，最后想了想还是改了。
刚好有时间和精力，现分享给和我一样的小白，也期待大佬赐教。

  首先，我们先完成二级菜单。二级菜单用jQuery很容易便可以实现。
  先来看看jQuery代码，其中注释是我刚刚添上去的，希望能帮助大家理解：

$(document).ready(function(){
    // 二级导航的展开与收缩
    var isTrue = false;  //先定义为false
    $(".nav-item").click(function () {
        $(this).next(".subnav").slideToggle();   //简单实现二级菜单，即点击切换显现和隐藏
        if (isTrue) { 
            $(this).find("i").css("transform", "rotate(0deg)");  
            isTrue = false;     //更改为false，下面的更改为true，实现箭头旋转
        }else {
            $(this).find("i").css("transform", "rotate(90deg)");
            isTrue = true;
        }
    }); 
});

  如果大家需要html和css代码，可以看一下下面。其中有些样式是我在自己后台管理系统上添加的，大家有侧重点的看就好。
  先看html代码：

<li class="nav-item">
	<a href="javascript:;">订单管理
         <i class="jiantou fa fa-angle-right"></i>
	</a>
</li>
<div class="subnav"><!--二级菜单-->
	<div class="subnav-item">
		<a href="adminScenery.html">景点订单</a>
	</div>
	<div class="subnav-item">
		<a href="adminHotel.html">酒店订单</a>
	</div>
</div>

  再来看css：

.nav-item{
	list-style-type: none;
}
.nav-item a,
.subnav-item a{/*导航和二级导航 a 链接样式*/
	height: 55px;
	line-height: 45px;
	padding: 8px 20px 8px 40px;
	color: #BDBDC0;
	display: block;
}
.nav-item a:hover,
.subnav-item a:hover{
	color: white;
}
.nav-item i{
	float: right;
	font-size: 20px;
	line-height: 40px;
	transition: 0.5s;
}

.nav-item:before{
	content: "";
    width: 5px;
    height: 0;
    background-color: #009688;
    position: absolute;
    top: 0;
    left: 0;
}
.nav-item:hover:before{
	height: 100%;
}
.subnav{/*二级菜单区域*/
	display: none;
    text-indent: 2em;
}
.subnav-item:hover{
	background-color: #009688;
	color: white;
}

  以上便可以简单实现二级菜单和箭头旋转，其中重要的便是jQuery部分。有需要的可以看一下，望赐教。