总目录：https://www.jianshu.com/p/8b3e5b2b4497
前端 - 子目录：https://www.jianshu.com/p/6fdb59d92e43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.outer{
height:1000px;
width:100%;
}
.munu{
float:left;
background-color:beige;
width:30%;
height:500px;
}
.content{
float:left;
background-color:rebeccapurple;
width:70%;
height:500px;
}
.title{
background-color:aquamarine;
line-height:40px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="outer">
<div class="munu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="../jquery-3.4.1.js"></script>
<script>
function show(self){
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>
