<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.show {
width: 240px;
height: 0;
overflow: hidden;
}
.show > li {
height: 30px;
line-height: 30px;
background-color: royalblue;
}
</style>
</head>
<body>
<button>点击下拉</button>
<ul class="show">
<li>菜单栏1</li>
<li>菜单栏2</li>
<li>菜单栏3</li>
<li>菜单栏4</li>
<li>菜单栏5</li>
<li>菜单栏6</li>
<li>菜单栏7</li>
<li>菜单栏8</li>
</ul>
<script>
let btn1 = document.querySelector("button");
let show1 = document.querySelector(".show");
let timer1 = null;
let timer2 = null;
let height = 0;
let flag1 = false; //判断是否展开
let paused = false; //判断是否暂停
btn1.onclick = function () {
if (!paused) {
paused = true;
if (!flag1) {
timer1 = setInterval(() => {
height += 1;
show1.style.height = height + "px";
// 240px
if (height >= 240) {
// 清除定时器
flag1 = true; //展开
paused = false;
clearInterval(timer1);
}
}, 10);
} else {
timer2 = setInterval(() => {
height -= 1;
show1.style.height = height + "px";
if (height == 0) {
// 0
// 清除定时器
flag1 = false; //回收
paused =false;
clearInterval(timer2);
}
}, 10);
}
} else {
// 暂停
paused = false;
clearInterval(timer1);
clearInterval(timer2);
}
};
</script>
<script src="">
let btn = document.querySelector("button");
let show = document.querySelector(".show");
let flag = false; //记录是否显示
btn.onclick = function () {
if (!flag) {
show.style.display = "block";
flag = true;
} else {
show.style.display = "none";
flag = false;
}
};
</script>
6616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
