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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 通用的二级菜单代码(css+javascript)

    ]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d

  • vue.js 左侧二级菜单显示与隐藏切换的实例代码

    废话不多说了,直接给大家贴代码了, 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style type

  • JS实现超精简响应鼠标显示二级菜单代码

    JS实现超精简响应鼠标显示二级菜单代码

    本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</

  • vue.js实现二级菜单效果

    本文实例为大家分享了vue.js实现二级菜单效果的具体代码,供大家参考,具体内容如下 主要是对二级菜单和当前点击的处理: 点击导航时,如果有二级菜单,就切换二级菜单显示状态(显示或者关闭),如果没有二级菜单,就变色,表示页面处于当前位置,并且导航中最多只能有一个菜单变色. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

  • js实现二级菜单点击显示当前内容效果

    js实现二级菜单点击显示当前内容效果

    最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q

  • JavaScript+CSS实现的可折叠二级菜单实例

    本文实例讲述了JavaScript+CSS实现的可折叠二级菜单.分享给大家供大家参考,具体如下: .aspx文件: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • 鼠标经过显示二级菜单js特效

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • javascript鼠标滑过显示二级菜单特效

    本文实例为大家分享了javascript鼠标滑过显示二级菜单效果,供大家参考,具体内容如下 1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById

  • js实现向右横向滑出的二级菜单效果

    js实现向右横向滑出的二级菜单效果

    本文实例讲述了js实现向右横向滑出的二级菜单效果.分享给大家供大家参考.具体如下: 这是一个网页上的横向滑出二级菜单,菜单是竖向排列的,但二级子菜单项是向右横向滑出的,引入了一个JS封装库文件,这个菜单兼容性方面也做的挺好,只是觉得,菜单中有些代码不便于修改,有兴趣的自己看看吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-right-show-out-2l-menu-codes/ 具体代码如下: <!DOCTYPE HTML

  • 简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no

随机推荐