复制下来直接运行就可以
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Test</title>
<script src = "jquery-3.6.0.js"></script>
<style>
/*兼容浏览器*/
* {
margin: 0;
padding: 0;
}
.content {
width: 100%;
height: 100%;
}
.content-left {
width: 19%;
height: 600px;
background-color: #1c232f;
float: left;
}
.content-right {
width: 81%;
height: 600px;
background-color: #6495ED;
float: left;
}
.left-title {
width: 100%;
height: 50px;
}
.left-title > a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
/*去掉a下默认下划线*/
text-decoration: none;
}
/*分割线*/
.seg {
height: 1px;
width: 100%;
background-color: black;
}
.nav {
/*上下5,左右0*/
margin: 5px 0;
}
/*菜单项主标题*/
.nav-title {
height: 40px;
width: 100%;
color: white;
text-align: center;
line-height: 40px;
cursor: pointer;
}
/*子标题内容区*/
.nav-content {
width: 100%;
height: 100%;
background-color: #0C1119;
}
/*子标题的样式*/
.nav-content > a {
display: block;
width: 100%;
height: 30px;
color: #CCCCCC;
text-decoration: none;
text-align: center;
line-height: 30px;
font-size: 13px;
}
/*子标题鼠标经过时的改变颜色*/
.nav-content > a:hover {
color: #FFFFFF;
background-color: #12040c;
}
/*内容区*/
.content-right{
font-size: 50px;
line-height: 600px;
text-align: center;
}
</style>
<script src = "https://code.jquery.com/jquery-3.2.1.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous"></script>
<script>
$(function () {
//隐藏所有子标题
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide();
});
//给菜单项中的所有主标题绑定事件
$(".nav-title").each(function () {
//获取点击当前标签下所有子标签
var navConEle = $(this).parents(".nav-menu").children(".nav-content");
//绑定点击事件,判断navConEle的display这个属性是否为none,时none的话时隐藏状态
$(this).click(function(){
if (navConEle.css("display") != "none") {
//隐藏,传参数自带动画,单位为毫秒
navConEle.hide(300);
} else {
//显示,传参数自带动画,单位为毫秒
$(".nav-menu").each(function () {
$(this).children(".nav-content").hide(300);
});
navConEle.show(300);
}
});
});
$(".nav-content>a").each(function () {
$(this).click(function () {
$(".content-right").html($(this).html());
});
});
});
</script>
</head>
<body>
<div class = "content">
<!--左侧导航栏-->
<div class = "content-left">
<div class = "left-title">
<a href = "#">xx后台</a>
</div>
<!--水平线-->
<div class = "seg"></div>
<!--菜单栏导航-->
<div class = "nav">
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">商品管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">商品列表</a>
<a href = "#">添加商品</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">订单管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">订单查看</a>
<a href = "#">订单排序</a>
</div>
</div>
<!--每一个菜单栏项-->
<div class = "nav-menu">
<!--主标题-->
<div class = "nav-title">类目管理</div>
<!--子标题-->
<div class = "nav-content">
<a href = "#">类目查看</a>
<a href = "#">类目删除</a>
</div>
</div>
</div>
<!--水平线-->
<div class = "seg"></div>
</div>
<!--右侧内容区-->
<div class = "content-right">
<h1>内容区</h1>
</div>
</div>
</body>
</html>