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，就关闭定时器（可以设置两个定时器）

代码如下：

    
    
    
    
    



    

        

            周一
            可视化
            可视化
        
        

            周二
            算法设计
            图形学
            计组课设
            操作系统
        
        

            周四
            形势与政策
            操作系统
        
        

            周五
            算法设计
        
    

    

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