<style type="text/css">
ul { margin:0px; padding:0px; list-style-type:none;}
#title2{ line-height:30px; background-color:#00F; cursor:pointer; width:480px; color:#FFF; padding-left:20px; }
#showdiv2{ display:block; height:0px; overflow:hidden; }
#showdiv2{ height:130px; }
#showdiv2 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(){
$('title2').addEvent('click',function(){
if($(this).get("status")==0){
$(this).set('status',1);
$(this).set('html','点击不透明');
$('showdiv2').fade(0); //0表示透明，1表示不透明，取值范围 1 >= x >=0
}
else
{
$(this).set('status',0);
$(this).set('html','点击透明');
$('showdiv2').fade(1);
}
});
});
</script>
<div id="title2" status="0" >点击透明</div>
<ul id="showdiv2">
<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>(鼠标移到代码上去，在代码的顶部会出现四个图标，第一个是查看源代码，第二个是复制代码，第三个是打印代码，第四个是帮助)
总结一下：这里的知识点和http://www.aspbc.com/tech/showtech.asp?id=1288这个例子中的差不多。只是这里增加了一个：更改层的透明度的方法：
$('showdiv2').fade(0); //0表示透明，1表示不透明，取值范围 1 >= x >=0，可填写0.5等小数。
原创文章，转载请注明来源:asp编程网（www.aspbc.com ），谢谢