js二级菜单 JavaScript实现二级菜单的制作
wait...... 人气:0这次实现的效果图如下:
这个二级菜单实现的效果是:
当点击某一个框时,会将已经打开的框的内容收回,再展开现在点击的框的内容。
那要如何实现这个效果呢?
我们可以step by step
1、首先我们要将整个框架显示出来,即所有框展开的样子,因为其显示/不显示是拿overflow:hidden
做的。
但是要注意不要所有的框都拿一种类型的盒子做,因为那样不方便写js代码,毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框,所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其初始化:设置高度等于span的高度,设置overflow:hidden
,如下图,可以结合下面代码
2、然后开始写js部分:确保点击某一框时,它会由闭合变为展开。我们的框是span,如果想要span的父盒子div中的内容全部显示,我们首先需要通过document.getElementsByTagName("span")
获取所有的span,然后利用for循环在每一个span的onclick
响应函数中通过parentNode
获取其对应的父盒子,使其父盒子的高度变为其scrollHeight
的值
3、然后我们需要在点击span使某盒子展开的时候,将已经展开的盒子收起。这时我们就需要一个变量now来记录上次被点击的盒子,令其初值为null,若now不等于当前点击的span,则获取now的父盒子,令其高度变为span的高度,然后令当前点击的span展开(第二点已经讲了怎么展开);若now等于当前点击的span,获取其父盒子的高度,如果等于span的高度,则令其高度变为scrollHeight
的值,否则令其变为span的高度
4、设置定时器,在准备将父盒子高度增加或减少的时候调用,当父盒子高度达到span的高度或达到scrollHeight
,就关闭定时器(可以设置两个定时器)
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .container { width: 300px; height: 700px; margin: 100px auto; } .container div { height: 43px; overflow: hidden; } .container div span { width: 150px; height: 40px; line-height: 40px; border-radius: 15px; display: block; text-align: center; background-color: rgba(104, 250, 201, 0.849); cursor: pointer; } a { width: 150px; height: 40px; line-height: 40px; text-decoration: none; display: block; text-align: center; } </style> </head> <body> <div class="container"> <div id=""> <span id="one">周一</span> <a href="">可视化</a> <a href="">可视化</a> </div> <div id=""> <span id="two">周二</span> <a href="">算法设计</a> <a href="">图形学</a> <a href="">计组课设</a> <a href="">操作系统</a> </div> <div id=""> <span id="three">周四</span> <a href="">形势与政策</a> <a href="">操作系统</a> </div> <div id=""> <span id="four">周五</span> <a href="">算法设计</a> </div> </div> <script> let menu = document.getElementsByTagName("span"); let now = null; for (let i = 0; i < menu.length; i++) { menu[i].onclick = function () { let par = menu[i].parentNode; if (now === i) { if (par.style.height === "43px") { open(par); } else { close(par); } } else { if (now !== null) { close(menu[now].parentNode); } open(par); now = i; } } } function open(par) { let tem = setInterval(() => { let num = par.offsetHeight; if (num >= par.scrollHeight) { clearInterval(tem); } par.style.height = num + 1 + "px"; }, 7); } function close(par) { let tem = setInterval(() => { let num = par.offsetHeight; if (num <= 43) { clearInterval(tem); return; } par.style.height = num - 1 + "px"; }, 7); } </script> </body> </html>
加载全部内容