请问这种展开节点的效果可以用什么实现呢?

Question

javascript,
很久很久以前接触过一个菜单生成器,生成的菜单都很精美的,呵呵

Answer 1

overflow:hidden，然后慢慢控制clip的范围，就出现这种效果了

Answer 2

<style>
#tree{
list-style:none;
margin:0;
padding:0;
height:1px;
overflow:hidden;
display:none;
}
#node{
cursor:hand;
}
</style>
<div id="node" onclick="toggle('tree')">+</div>
<ul id="tree">
<li>|- item</li>
<li>|- item</li>
<li>|- item</li>
<li>|- item</li>
<li>|- item</li>
</ul>
<script language="javascript">
<!--
function toggle( id )
{
o = document.getElementById(id);
if( o.currentStyle.display == "none" )
{
o.style.display="block";
changeHeight(id, 'out' );
}
else
changeHeight( id,'in' );
}
function changeHeight( id, act )
{
o = document.getElementById(id);
//alert(o.style.height);
if( act == 'out' )
{
if( parseInt(o.currentStyle.height) < o.scrollHeight )
{
o.style.height = (parseInt(o.currentStyle.height) + 10) + "px";
setTimeout( "changeHeight('"+id+"','out')", 10 );
}
else
{
o.style.display="block";
}
}
else
{
if( parseInt(o.currentStyle.height) > 10  )
{
o.style.height = (parseInt(o.currentStyle.height) - 10) + "px";
setTimeout( "changeHeight('"+id+"','in')", 10 );
}
else
{
o.style.display="none";
}
}
}
//-->
</script>