写在前面

在使用jquery开发网页的时候，做不到像vue一样引入组件，但是我们的导航栏，还是不能每个页面都写的。要不然当需要修改小部分内容的时候，还得需要一个个文件去改，这样的代码也太不好维护了。所以我们需要使用js来生成导航栏。这里写的比较简单，入门级的，提供大致思路，可以根据你们的使用场景来进行修改。

前期准备

• jQuery
  只需要这个，版本还是没有要求的

实现的 js 方法

utils.js

/**
 * 类名 active 当前导航栏选中
 * @param Number 传入需要高亮的节点，只能是一个
 * @return String
*/
 function menuEach(key) {
    let menuHTML = ''
    let ParentHTML = ''         // 父元素完整html
    menus.forEach((el,index) => {
        let Parent = ''
        
        let childHTML = ''      // 子元素完整html
        // 判断是否有子元素
        if(("childNodes" in el)) {
            
            let child = ''
            // 遍历子元素
            el.childNodes.forEach(elNode => {
                let className = ''
                if(elNode.key === key) {
                    className = 'active'
                }
                child += `
                    <li class='${className}'><a href='${elNode.path}'>${elNode.title}</a></li>
                `
            })

            // 子元素html
            childHTML = `
                <ul>
                    ${child}
                </ul>
            `
        }
        let className = ''
        if(el.key === key) {
            className = 'active'
        }
        // 父元素html
        Parent += `
            <li class='${className}'><a href='${el.path}'>${el.title}</a></li>
        `
        // 单个导航html
        ParentHTML += `
                ${Parent}
                ${childHTML}
        `
    })
    // 完整的html
    menuHTML = `
        <ul>
            ${ParentHTML}
        </ul>
    `
    return menuHTML
}

声明导航栏数据的js

menu.js

// key 不能相同
const menus = [
    {
        title: '首页',  // 标题
        path: 'index.html',       // 跳转的路径
        key: 1,         // key 唯一值 不能重复
        childNodes: [   // 子元素
            {
                title: '点我跳转',
                path: 'child.html',
                key: 4,
            }
        ]
    },
    {
        title: '列表',
        path: '',
        key: 2,
        childNodes: [
            {
                title: '分类',
                path: '',
                key: 5,
            }
        ]
    },
    {
        title: '案列',
        path: '',
        key: 3,
    }
]

我们的html

index.html
<div id="menu"></div> 这个是需要用到的dom
<script> $(() => { const key = 1 // 声明哪个是选中的状态 // 遍历导航栏 const nodes = menuEach(key) $('#menu').html(nodes) }) </script>
这个是 js 这些都写在html即可

<!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>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/menu.js"></script>
    <script src="./js/utils.js"></script>
</head>
<body>
    <div id="menu"></div>
    <div>Parent</div>

    <script>
        $(() => {
            const key = 1   // 声明哪个是选中的状态
             // 遍历导航栏
            const nodes = menuEach(key)
            $('#menu').html(nodes)
        })
    </script>
</body>
</html>

目录结构

• js
  • jquery-3.6.0.min.js
  • menu.js
  • utils.js
• child.html
• index.html

这里 child.html 的代码没有展示，但是实际上和 index.html 是差不多的，按照上面的使用方式即可。