当前台的产品分类有几层分类，而前台页面能够展示出来分类的地方大小有限，这样就需要用到这种功能：先将一级分类展示出来，当点击一级分类的时候，慢慢地展开该分类下面的子分类；再次点击这个一级分类的时候，该分类下面的子分类又慢慢收缩回去，关闭掉。这里使用mootools来写相关的代码。
<style type="text/css">
ul { margin:0px; padding:0px; list-style-type:none;}
#title{ line-height:30px; background-color:#00F; cursor:pointer; width:480px; color:#FFF; padding-left:20px; }
#showdiv{ display:block; height:0px; overflow:hidden; }
#showdiv li { width:480px; line-height:25px; height:25px; padding-left:20px; background-color:#ccc; border-bottom:1px solid #fff; }
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
//当页面加载完后
window.addEvent('domready',function(){
//展开和关闭动画
$('title').addEvent('click',function(){
if($(this).get("status")==0){
$(this).set('status',1);
$(this).set('html','点击关闭子分类');
$('showdiv').tween('height', '130px');
}
else
{
$(this).set('status',0);
$(this).set('html','点击展开子分类');
$('showdiv').tween('height', '0px');
}
});
});
</script>
<div id="title" status="0" >点击展开子分类</div>
<ul id="showdiv">
<li id="new_1">子分类1</li>
<li id="new_2">子分类2</li>
<li id="new_3">子分类3</li>
<li id="new_4">子分类4</li>
<li id="new_5">子分类5</li>
</ul>(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)把以上代码保存为html文件，双击运行即可看到效果。
总结一下以上用到的知识点：
1、window.addEvent('domready',function(){……}); 页面加载完后js代码。
2、$('title').addEvent('click',function(){……}); 给某一ID绑定onclick事件。
3、$('title').get("status") 获取ID='title'的自定义属性status的值。
$('title').set('status',0);给ID='title'的自定义属性status赋值。 这里这个属性是用来判断子分类当前属于展开状态还是关闭状态，以便下面对它进行的操作。
4、$('title').set('html','点击关闭子分类'); 给id='title'的html属性赋值，同js中的innerHTML="值"。
5、$('showdiv').tween('height', '130px'); 让id='showdiv'的层的高度慢慢地由0px变成130px，以达到动画效果。
原创文章，转载请注明来源：asp编程网（www.aspbc.com），谢谢。