最简单的展开与折叠菜单,一般是通过切换display
属性的none
和block
的值来实现。但是这样会使得整个过程非常的生硬,内容是一瞬间展示给用户,交互过程感觉不是特别好。我们加上动画以后让整个过程更加柔和。
下面通过css动画进行一个展开折叠的操作
css
.container{
position: relative;
overflow: hidden;
width: 400px;
height: 0;
transition: height .6s;
}
.content{
background: red;
}
html
<div id="div">展开</div>
<div class="container">
<div class="content" style="height: 100px;"></div>
</div>
js
let isShow = false
const toggle = document.querySelector("#div")
toggle.onclick = function(){
isShow = !isShow
div.innerText = isShow ? "折叠" : "展开"
document.querySelector(".container").style.height = isShow ? "100px" : "0"
}
网友评论