vuepress实现侧边菜单展开收起_vuepress 三级菜单-CSDN博客

本文链接：https://blog.csdn.net/weixin_58031521/article/details/129833692

文章详细介绍了如何在Vuepress中配置侧边栏，以达到只展开当前选中菜单，其他菜单折叠的效果。这涉及到config.js的设置，包括基础路径、导航条目、侧边栏结构以及displayAllHeaders的配置。同时，文章强调了正确匹配markdown文件结构和config配置的重要性。

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

目标：vuepress实现侧边栏只展开当前菜单，其他菜单折叠的效果。

效果示例：

代码结构：

实现步骤：

config.js配置完整代码：

module.exports = {
    base: '/nav/',
    title: '文档中心',
    description: 'Do or not to do',
    themeConfig: {
        nav: [
            {text: '首页', link: '/'},
            {text: '研究一下文档层次感', link: '/test/'},
        ],
        sidebar: {
            '/test/': [
                '',           // ./test/README.md文件，对应页面上/test/路径
                'ECMAScript',  // ./test/ECMAScript.md文件，对应页面上/test/ECMAScript.html
                'vue2',        // ./test/vue.md文件，对应页面上/test/one.html
                'vue3',        // ./test/vue3.md文件，对应页面上/test/two.html
            ],
            '/test/': [
                {
                    title: '语言基础',
                    collapsable: true,
                    children: [
                        {title: 'ECMAScript', path: '../test/ECMAScript.md'},
                    ]
                },
                {
                    title: '开发框架',
                    collapsable: true,
                    sidebarDepth: 3, // 这里对侧边栏目录显示的标题级别深度起作用
                    children: [
                        {title: 'vue2', path: '../test/vue2.md'},
                        {title: 'vue3', path: '../test/vue3.md'},
                    ]
                },
            ]
        },
        displayAllHeaders: false // 默认值：false，这里如果为true，将无法实现侧边栏目录动态展开效果
    }
}

配置说明：

1. 实现侧边栏菜单的层次结构，点击可展开折叠