注：對於同一個對象不超過3個操作的，可直接寫成一行，超
過3個操作的建議每行寫一個操作。這樣可讀性較強，可提高代碼的可讀性和可維護性
核心代碼：
$(".has_children").click(function(){
$(this).addClass("highlight") //為當前元素增加highlight類
.children("a").show().end() //將子節點的<a>元素顯示出來並重新定位到上次操作的元素
.siblings().removeClass("highlight")獲取元素的兄弟元素，並去掉它們的highlight類
.children("a").hide();//將兄弟元素下的<a>元素隱藏
})
以上js代碼的意思為：當點擊含有class名為“has_children
”的節點時，其子節點元素“a”添加上類“highlight”並且
顯示，同時該同輩元素“a”去掉class"highlight"並隱藏。
全部過程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery的第一個demo</title>
<script src="js/jquery-2.1.1.min.js" rel="script"></script>
<style>
.menu{
width: 200px;
}
.has_children{
background: #f00;
color: yellow;
cursor: pointer;
}
.highlight{
background: #647787;
color: #f0f;
}
div{
padding: 0;
margin: 10px 0;
}
div a{
background: #1a272f;
color: #fff;
display: none;
width: 200px;
float: left;
}
</style>
<script>
$(document).ready(function () {
$(".has_children").click(function(){
$(this).addClass("highlight").children("a").show().end().siblings().
removeClass("highlight").children("a").hide();
})
})
</script>
</head>
<body>
<div class="menu">
<div class="has_children">
<span>第一個節點</span>
<a>子節點1</a>
<a>子節點2</a>
<a>子節點3</a>
<a>子節點4</a>
</div>
<div class="has_children">
<span>第二個節點</span>
<a>子節點1</a>
<a>子節點2</a>
<a>子節點3</a>
<a>子節點4</a>
</div>
<div class="has_children">
<span>第三個節點</span>
<a>子節點1</a>
<a>子節點2</a>
<a>子節點3</a>
<a>子節點4</a>
</div>
</div>
</body>
</html>