<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQ.js"></script>
<script>
window.onload = function () {
$(".title").click(function () {
$('.body').addClass('hide');
$(this).next().removeClass("hide");
});
};
</script>
<style>
body {
margin: 0;
}
.menu {
234px;
background-color: steelblue;
}
.item {
line-height: 50px;
text-align: center;
border-bottom: white solid 1px;
}
.hide {
display: none;
}
.title:hover {
color: green;
cursor: pointer;
}
.content {
background-color: #b0b0b0;
border: black solid 1px;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body hide" id="d1">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="body hide ">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<div class="content">内容1</div>
<div class="content">内容1</div>
<div class="content">内容1</div>
</div>
</div>
</div>
</body>
</html>