效果：

HTML代码：<div class="menu"> <div class="haschildren"> <span>第一个列表</span> <a>第一个列表内容一</a> <a>第一个列表内容二</a> <a>第一个列表内容三</a> <a>第一个列表内容四</a> </div> <div class="haschildren"> <span>第二个列表</span> <a>第二个列表内容一</a> <a>第二个列表内容二</a> <a>第二个列表内容三</a> <a>第二个列表内容四</a> </div> <div class="haschildren"> <span>第三个列表</span> <a>第三个列表内容一</a> <a>第三个列表内容二</a> <a>第三个列表内容三</a> <a>第三个列表内容四</a> </div></div>
CSS代码：
.menu{ width:150px;}.haschildren {cursor:pointer; background:#666; color:#FFF;}div a{ display:none;float:left; width:150px;background:#ccc;} //初始化的时候隐藏所有a元素.highlight{ color:#FFF;background:#0C3; }JQUERY代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> //引用jquery库<script>$(document).ready(function(){ //待文档加载 $(".haschildren").click(function(){ //为类为haschildren的元素添加点击事件 $(this).addClass("highlight").children("a").show().end() //当其被点击就添加一个css,样式名为highlight,并且其子元素a全部显示。 .siblings().removeClass("highlight").children("a").hide(); //于此同时它的同胞元素，也就是其他类名为children的元素，移除highlight类，且下面的a元素隐藏。});});</script>