如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？

html-css012

如何用HTML、CSS3和JavaScript做出下图的展开、收起的动画？,第1张

这样就是一个展开收缩的效果了

<body>

<div id="div1">

<ul>

<li></li>

</ul>

</div>

<script>

var oDiv = document.getElementById('div1')

var oUl = oDiv.getElementsByTagName('ul')[0]

var Off = true

oDiv.onclick = function(){

if(Off){

oUl.style.display = "block"

Off = false

}else{

oUl.style.display = "none"

Off = true

}

}

</script>

点编辑-大纲显视-启动自动大纲显视就行了！

如下图：

1、

2、

我的是vs2012,希望采纳：）