用YUI3做的一个简单小实例。
====================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
.content{display:none;}
ul{list-style:none;}
</style>
<body>
<ul class="menu">
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题1</div>
<div class="content">
内容1
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题2</div>
<div class="content">
内容2
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题3</div>
<div class="content">
内容3
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题4</div>
<div class="content">
内容4
</div>
</li>
<li>
<div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题5</div>
<div class="content">
内容5
</div>
</li>
</ul>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
YUI().use("node","event",function(Y){
function MenuItem(node){
var imgSrc = ["http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif","http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/collapse.gif"];
var btn = node.query(".btn");
var content = node.query(".content");
btn.on("click",function(){
Y.all(".content").setStyle("display","none");
Y.all(".btn").set("src",imgSrc[0]);
if(content.getStyle("display") == "none"){
content.setStyle("display","block");
btn.set("src",imgSrc[1]);
} else {
content.setStyle("display","none");
btn.set("src",imgSrc[0]);
}
},this);
}
Y.all(".menu li").each(function(n,k){
new MenuItem(n);
});
});
</script>
</body>
</html>
============================================================