<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>菜单的闭合</title>
<meta charset="UTF-8">
<script src="../day6/jquery-3.4.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass('hide');
$(self).parent().siblings().children('.con').addClass('hide');
}
</script>
<style>
.menu{
height: 500px;
30%;
background-color: gainsboro;
float:left;
}
.content{
height: 500px;
70%;
background-color: rebeccapurple;
float:left;
}
.title{
line-height: 50px;
background-color: #425a66;
color:forestgreen;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单1</div>
<div class="con">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单2</div>
<div class="con hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单3</div>
<div class="con hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
</html>
