使用javascript生成级联菜单

最新推荐文章于 2022-05-06 17:54:47 发布

追梦111

最新推荐文章于 2022-05-06 17:54:47 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery html

本文链接：https://blog.csdn.net/yangkaige111/article/details/81041649

本文介绍了如何使用jQuery创建级联菜单。通过指定的数据格式，结合HTML布局，利用递归方法动态生成菜单项。菜单中，有子菜单的父级菜单会标为蓝色，子菜单本身不着色。这种方法适用于组织和管理项目模块，但实际应用中可能需要进一步完善细节。

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

在做某些管理系统时，大多数情况都会用到级联菜单，可以对项目中的各个模块进行组织和管理，同时每个模块一般会有多个页面，所以针对这些情况就要生成指定功能的菜单了。下面是基于jQuery的简单的级联菜单。
html中的布局采用如下结构：

<ul id="rootMenu">
    <li>
            <div style="background: #0000FF;">新闻 </div>
            <ul style="margin-left: 6px;">
                <li>
                    <div style="background: #0000FF;margin:2px;">美食</div>
                    <ul style="margin-left: 6px;">
                        <li>西瓜</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>健康</li>
            </ul>
        </li>
        <li>
            <div style="background: #0000FF;">娱乐 </div>
            <ul style="margin-left: 6px;">
                <li>电视</li>
                <li>电影</li>
            </ul>
        </li>
    </ul>

当然在这只是一个布局而已，做好后我们只需要<ul id="rootMenu"></ul>这个节点就可以了，因为里面的菜单是通过数据来生成的。具体方法如下：

function genMenuByData(parent, menuItems) {
    var curNode;
    for(var i = 0; i < menuItems.length; i++) {
        if(menuItems[i].subItems) {
            curNode = $('<li><div style="background: #0000FF;">' + menuItems[i].title + '</div></li>').appendTo(parent);
            curNode = $('<ul style="margin-left: 6px;"></ul>').appendTo(curNode);
            genMenuByData(curNode, menuItems[i].subItems)
        } else {
            parent.append(
                '<li>' + menuItems[i].title + '</li>'
            );
        }
    }
}

数据格式为：

var menuData = [{
        title: '新闻 ',
        subItems: [{
            title: '美食',
            subItems: [{
                title: '西瓜'
            }, {
                title: '苹果'
            }]
        }, {
            title: '健康'
        }]
    }, {
        title: '娱乐 ',
        subItems: [{
            title: '电视'
        }, {
            title: '电影'
        }]
    }];

方法调用时，我们只需传入根节点和菜单数据进去即可：genMenuByData($('#rootMenu'), menuData);这样就可以生成我们所需的级联菜单了。
这里写图片描述
这个菜单中，如果某个菜单有子菜单，则标识为蓝色，子菜单本身就不标色了。

genMenuByData方法的基本思路是，遍历每个菜单节点数据，如果某个节点有子节点，则先生成父级菜单内容，然后保存该父级菜单中的一个jQuery对象，再递归调用，传入当前的父级对象和它相关的所有子菜单数据，某个节点没有子节点时，则直接生成该子节点即可，即直函数中的else分支，上述代码只是提供一个大概的思路，在实际项目中应该还要完善很多细节方面的问题，仅供参考。