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

html-css018

如何用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,希望采纳：）

<style>

.none{display:none}

</style>

<button id="open" type="button" data-ref="fame">点我展开<button>

<div id="fame" class='none'>我是内容<div>

$(function(){

var open = $('#open')

var ref = open .data('ref')

var fame =$("#")+ref

if(fame.hasClass("none")){

fame.removeClass('none')

open.text('点我关闭')

}else{

fame.addClass('none')

open.text('点我展开')

}

})