效果：
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>
