原生js实现菜单树

要在原生 JavaScript 中实现一个菜单树，通常涉及以下几个步骤：

数据结构设计：首先，需要设计一个合适的数据结构来表示菜单项及其子菜单。通常可以使用嵌套的对象或数组。
DOM 操作：使用 JavaScript 动态生成菜单的 HTML 结构，并将其插入到页面中。
事件处理：为菜单项添加事件监听器，以处理点击或其他交互操作，例如展开/折叠子菜单。

下面是一个简单的示例，展示如何使用原生 JavaScript 实现一个基本的菜单树：

示例数据结构

const menuData = [
    {
        name: '菜单1',
        children: [
            { name: '子菜单1-1' },
            { name: '子菜单1-2', children: [{ name: '子菜单1-2-1' }] }
        ]
    },
    {
        name: '菜单2',
        children: [
            { name: '子菜单2-1' },
            { name: '子菜单2-2' }
        ]
    },
    { name: '菜单3' }
];

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单树示例</title>
    <style>
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        .menu-item {
            cursor: pointer;
        }
        .submenu {
            display: none;
        }
    </style>
</head>
<body>
    <ul id="menu"></ul>

    <script src="menu.js"></script>
</body>
</html>

JavaScript 实现

// menu.js

function createMenu(data, parentElement) {
    data.forEach(item => {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = item.name;
        span.classList.add('menu-item');
        li.appendChild(span);

        if (item.children && item.children.length > 0) {
            const ul = document.createElement('ul');
            ul.classList.add('submenu');
            li.appendChild(ul);
            createMenu(item.children, ul);

            span.addEventListener('click', function(event) {
                event.stopPropagation();
                ul.style.display = ul.style.display === 'block' ? 'none' : 'block';
            });
        }

        parentElement.appendChild(li);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const menuContainer = document.getElementById('menu');
    createMenu(menuData, menuContainer);
});

解释

数据结构：menuData 是一个嵌套的数组，每个菜单项可以有一个 children 属性，表示其子菜单。
DOM 操作：createMenu 函数递归地遍历数据结构，为每个菜单项创建相应的 HTML 元素，并将其插入到指定的父元素中。
事件处理：为每个有子菜单的菜单项添加点击事件监听器，点击时切换子菜单的显示状态。

优势

灵活性：可以轻松地修改数据结构来适应不同的菜单需求。
可维护性：代码结构清晰，易于理解和维护。
性能：使用原生 JavaScript，避免了额外的库或框架带来的性能开销。

应用场景

后台管理系统：常见的左侧导航菜单。
内容管理系统：用于展示文章分类或其他层级结构的数据。
企业官网：用于展示多层次的导航菜单。

通过这种方式，你可以使用原生 JavaScript 实现一个功能齐全的菜单树，并根据需要进行扩展和定制。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

原生js实现菜单树

示例数据结构

HTML 结构

JavaScript 实现

解释

优势

应用场景

相关·内容

Paper与工程| B+-Tree与透明压缩技术探索

珠海站丨数产融合·云+助力

腾讯金融云银行业数字原生技术论坛

云函数 Web Function 落地应用实践—大咖分享

Techo TVP开发者峰会-云以致用，智效合一(Day 1)

Techo TVP开发者峰会-云以致用，智效合一（Day 2）

Serverless 一站式云原生应用开发实践

雁栖学堂-湖存储专题直播

ServerlessDays · China Online

腾讯云CDB/CynosDB技术揭秘（上）：云原生、海量运营

腾讯云CDB/CynosDB技术揭秘（下）自主可控、前沿探索

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐