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

如何用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>

css一般处理鼠标移动显示事件,利用:hover很方便就能实现。

点击事件的话,一般跟JS配合。

显示隐藏,一般都是利用display这个CSS来控制,因为它隐藏的时候不占位置。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6116035.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存