一、链式表达式完成菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.c1 {
position: fixed;
top: 0;
left: 0;
bottom: 0;
float: left;
width: 20%;
height: 100%;
background-color: violet;
}
.title {
font-size: 48px;
color: white;
text-align: center;
}
.item {
border: 1px solid white;
text-align: center;
color: red;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="c1">
<div class="title">菜单一</div>
<div class="hidden">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单二</div>
<div class="hidden">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="title">菜单三</div>
<div class="hidden">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</div>
<script>
$('.title').on('click',function () {$(this).next().removeClass('hidden').siblings().has(".item").addClass('hidden')})
</script>
</body>
</html>