JavaScript 多级联动浮动菜单 (第二版)

最新推荐文章于 2021-06-05 06:45:35 发布

cloudgamer

最新推荐文章于 2021-06-05 06:45:35 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript 文章标签： javascript containers function menu opera ie

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/5932805

版权

本文详述了如何使用JavaScript实现多级联动和浮动菜单的改进版，包括程序原理、容器对象、菜单对象、多级联动的实现步骤、样式设置以及内存管理和兼容性问题。通过实例和代码解析，帮助读者理解并掌握此类菜单的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。
这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。

预览图

前台效果预览

下载完整实例

程序原理

程序最关键的地方是多级联动，先大概说明一下：
首先第一级的菜单元素整理好后，从他们开始，当某个菜单元素触发显示下级菜单时，
准备好下一级的容器元素，并把下一级的菜单元素放进去，再定位并显示容器元素。
里面的菜单元素又可以触发显示下级菜单，然后按上面的步骤执行下去。
这样一级一级的递推下去，形成多级的联动菜单。

程序说明

【容器对象】

在多级联动中，每一级都需要一个容器元素来存放菜单元素。
程序中每个容器元素都对应一个容器对象，用来记录该容器的相关信息。
容器对象的集合记录在程序的_containers属性中。

容器参数containers是程序实例化时的必要参数，它的结构如下：

[
    容器元素(id),
    { id: 容器元素(id), menu: 插入菜单元素(id) },

]

首先如果containers不是数组的话，程序会自动转成单元素数组。
如果菜单插入的元素就是容器元素本身，可以直接用容器元素(id)作为数组元素。
否则应该使用一个对象结构，它包括一个id属性表示是容器元素(id)和一个menu属性表示菜单插入的元素(id)。

containers会在程序初始化时这样处理：

主要是生成一个容器对象，其中Pos属性是容器元素，Menu属性是插入菜单的元素。
然后传递索引和容器对象给IniContainer函数，对容器对象做初始化。

在IniContainer中，首先用ResetContainer重置容器对象可能在程序中设置过的属性。
再给容器元素添加事件：

在mouseout时，先判断是否容器内部或容器之间触发，不是的话再用定时器执行Hide隐藏函数。
在Hide里面，主要是隐藏容器：

this .forEachContainer( function (o, i){
     if ( i === 0 ) {
         this .ResetCss(o);
    } else {
         this .HideContainer(o);
    };
});

由于第一级容器一般是不自动隐藏的，只需要用ResetCss来重置样式。
其他容器会用HideContainer函数来处理隐藏：

var css = container.Pos.style;
css.visibility = " hidden " ; css.left = css.top = " -9999px " ;
this ._containers[container._index - 1 ]._active = null ;

其中_active属性是保存该容器触发下级菜单的菜单对象，在隐藏容器同时重置上一级容器的_active。

在mouseover时清除容器定时器，其实就是取消Hide执行。

之后是设置样式：