<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$(".has_children").click(function(){
$(this).addClass('lightcolor').children("a").show().end().siblings().removeClass("lightcolor").children("a").hide()
})
});
</script>
<style>
#menu{300px;}
.has_children{background:#555;color:#fff;cursor:pointer;}
.lightcolor{color:#fff;background:green;}
div{padding:0;margin:10px 0;}
div a{background:#888;display:none;float:left;300px;}
</style>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章认识jQuery</span>
<a>1-1</a>
<a>1-2</a>
<a>1-3</a>
<a>1-4</a>
<a>1-5</a>
<a>1-6</a>
<a>1-7</a>
</div>
<div class="has_children">
<span>第二章认识jQuery</span>
<a>2-1</a>
<a>2-2</a>
<a>2-3</a>
<a>2-4</a>
<a>2-5</a>
<a>2-6</a>
<a>2-7</a>
</div>
<div class="has_children">
<span>第三章认识jQuery</span>
<a>3-1</a>
<a>3-2</a>
<a>3-3</a>
<a>3-4</a>
<a>3-5</a>
<a>3-6</a>
<a>3-7</a>
</div>
</div>
</body>
</html>