实现步骤：
步骤一、
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div id="m1" onclick="Change(1);">菜单一</div>
<div>
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div>
<div id="m2" onclick="Change(2);">菜单二</div>
<div>
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div>
<div id="m3" onclick="Change(3);">菜单三</div>
<div>
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function Change(arg){
//找到，点击的哪一个？
if(arg==1){
var menu=$('#m1')
}else if(arg==2){
var menu=$('#m2')
}else{
var menu=$('#m3')
}
console.log(menu.text())
}
</script>
</body>
</html>
步骤二、
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div onclick="Change(this);">菜单一</div>
<div class="content">
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单二</div>
<div class="content hide">
<div>2.1</div>
<div>2.2</div>
<div>2.3</div>
</div>
</div>
<div>
<div onclick="Change(this);">菜单三</div>
<div class="content hide">
<div>3.1</div>
<div>3.2</div>
<div>3.3</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function Change(arg){
//找到，点击的哪一个？
//var t= $(arg).text();
//console.log(t); //$(arg)表示当前点击的标签
//一、找到下一个标签，移除hide
//$(arg).next()下一个标签
//removeClaass('')
$(arg).next().removeClass('hide');
//二、找到其他菜单，内容隐藏，添加hide
//当前标签的父标签 $(arg).parent()
//所有父标签的兄弟标签 $(arg).parent().siblings()
//所有兄弟标签下的content样式的标签，添加hide样式
$(arg).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>
效果：