<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏菜单栏</title>
<!--主要为了实现jQuery的click绑定及链式编程-->
<style>
.menu{
height: 30px;
100px;
background-color: #dbffb7;
border: 1px solid;
}
.content{
height: 100px;
100px;
border: 1px solid;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div class="menu">菜单一</div>
<div class="content">内容一</div>
</div>
<div>
<div class="menu">菜单二</div>
<div class="content hide">内容二</div>
</div>
<div>
<div class="menu">菜单三</div>
<div class="content hide">内容三</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu').click(function () {
// $(this).next().removeClass('hide').parent().siblings().children().first().addClass('hide');
// 上一句是错的，因为first是得到所有获取标签中的第一个标签
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
});
</script>
</body>
</html>JavaScript（14）：实现jQuery的click绑定及链式编程
示例代码：