近期在看这本书，顺便把相应的代码粘上来。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>1-5-1</title>
<style type="text/css">
#menu { 300px; }
.has_children { background: #555; color:#fff; cursor:pointer; }
.highlight { color:#fff; background:green; }
div { padding:0; margin:10px 0; }
div a { background:#888; display:none; float:left; 300px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(".has_children").click(function (){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
} // ef click
);
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>Pattern 1</span>
<a href="">1.1-JavaScript-Lib</a>
<a href="">1.2-JavaScript-Lib</a>
<a href="">1.3-JavaScript-Lib</a>
<a href="">1.4-JavaScript-Lib</a>
<a href="">1.5-JavaScript-Lib</a>
</div>
<div class="has_children">
<span>Pattern 2</span>
<a href="">1.1-JavaScript-Lib</a>
<a href="">1.2-JavaScript-Lib</a>
<a href="">1.3-JavaScript-Lib</a>
<a href="">1.4-JavaScript-Lib</a>
<a href="">1.5-JavaScript-Lib</a>
</div>
<div class="has_children">
<span>Pattern 3</span>
<a href="">1.1-JavaScript-Lib</a>
<a href="">1.2-JavaScript-Lib</a>
<a href="">1.3-JavaScript-Lib</a>
<a href="">1.4-JavaScript-Lib</a>
<a href="">1.5-JavaScript-Lib</a>
</div>
</div>
</body>
</html>