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

骑猪看日落 2021-10-23 16:18 213阅读 0赞

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

首先，我们先完成二级菜单。二级菜单用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部分。有需要的可以看一下，望赐教。