JavaScript实现二级菜单的制作
本文实例为大家分享了JavaScript实现二级菜单效果的具体代码，供大家参考，具体内容如下
这次实现的效果图如下：
这个二级菜单实现的效果是：
当点击某一个框时，会将已经打开的框的内容收回，再展开现在点击的框的内容。
那要如何实现这个效果呢？
我们可以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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
给所有的超级练级都加上onmousemove时间的js代码...2007-08-08
本篇文章主要是对用javascript替换URL中的参数值示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了Webpack优化-缩小文件搜索范围的相关知识，文中较详细的给大家介绍了可以优化的途径,需要的朋友可以参考下2017-12-12
之前虽然介绍过一种求数组最大最小值的方法，但那个方法只是用于数组中都是数字的，下面为大家介绍个方法适用于任何数组，有此需求的朋友可以参考下2013-08-08
下面小编就为大家分享一篇浅谈js promise的使用。具有很好的参考价值，看完这篇都懂了。希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最近遇到的需求,把html转成pdf文件下载导出,下面这篇文章主要给大家介绍了关于js将html页面转为pdf的两种方法,文中给出了详细的代码示例,需要的朋友可以参考下2023-08-08![[js高手之路]HTML标签解释成DOM节点的实现方法](//img.jbzj.com/images/xgimg/bcimg6.png)
下面小编就为大家带来一篇[js高手之路]HTML标签解释成DOM节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了javascript贪吃蛇游戏设计与实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要为大家详细介绍了微信小程序实现简易封装弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了微信小程序实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
![[js高手之路]HTML标签解释成DOM节点的实现方法](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论