html 二级菜单箭头,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代码：

再来看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部分。有需要的可以看一下，望赐教。