• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JavaScript实现二级菜单的制作

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS实现百度新闻导航栏效果发布时间:2022-02-05
下一篇:
JavaScript实现抽奖器效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap