jQuery实现层叠菜单功能;font-awesome图标样式完成箭头展示
还有个比较方便的插件zTree,后续整理总结。
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-3.5.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.menus {
margin: 20px 0 0 50px;
}
.menus .sub-menu {
margin-left: 25px;
}
</style>
</head>
<body>
<div class="menus">
<ul>
<li>
<a class="menu-title" href="#">公司管理</a><i class="fa fa-arrow-down"></i>
<ul class="sub-menu">
<li><a>会议室管理</a></li>
<li><a>资产管理</a></li>
<!-- </ul>-->
</li>
<li>
<a class="menu-title" href="#">系统管理</a><i class="fa fa-arrow-down"></i>
<ul class="sub-menu">
<li><a>权限管理</a></li>
<li><a>菜单管理</a></li>
<li><a>用户管理</a></li>
</ul>
</li>
<li>
<a class="menu-title" href="#">部门管理</a><i class="fa fa-arrow-down"></i>
<ul class="sub-menu">
<li><a>部门经费</a></li>
<li><a>部门资产</a></li>
<li><a>部门员工</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script>
// 给所有顶级菜单加上点击事件
$('.menus .menu-title').click(function() {
// 这个是获取顶级菜单的子菜单
var subMenu = $(this).siblings('ul');
// 这是获取到小图标
var icon = $(this).next();
// subMenu.css('display'); 去样式中display值
// console.log(subMenu.css('display'))
if('none' == subMenu.css('display')) { // display值为none表示隐藏,就要显示
// 当显示的时候,应该是向下的箭头,所以要将向左的箭头移除掉
icon.removeClass('fa-arrow-left'); // removeClass是移除样式
// 添加向下的箭头
icon.addClass('fa-arrow-down'); // addClass是添加样式
subMenu.show();
}else { // else表示display值为block, 就要隐藏
// 当影藏的时候,应该是向左的箭头,所以要将向下的箭头移除掉
icon.removeClass('fa-arrow-down');
// 添加向左的箭头
icon.addClass('fa-arrow-left');
subMenu.hide();
}
return false; //阻止a标签的默认行为
})
</script>
</html>