简介

研究了好长时间vuepress实现类似官网只展开当前页面导航标题的侧边栏效果，一直没找到实现方式，官方文档也没明确提出这个是如何配置，后来突然搜到一篇文档有个介绍，这里我再说下配置方式。

首先看下官网效果：

上方为当前打开的标题，下方为其他未打开的标题。

配置方法

1、将sidebar配置的children改为对象组

如下所示，将children数组中的值改为对象类型：

    '/web/': [
        {
            title: '语言基础',
            // sidebarDepth: 3,
            collapsable: true,
            children: [
                {title: 'ECMAScript', path: 'language/ECMAScript'},
            ]
        },
        {
            title: '开发框架',
            // sidebarDepth: 2, // 这里对侧边栏目录显示的标题级别深度起作用
            collapsable: true,
            children: [
                {title: 'vue', path: 'framework/vue'},
                {title: 'vue-cli', path: 'framework/vue-cli'},
                {title: 'vue-router', path: 'framework/vue-router'},
                {title: 'vue-vuex', path: 'framework/vue-vuex'},
            ]
        },
    ]

2、修改config.js

注释掉displayAllHeaders属性设置。

module.exports = {
    ...
    themeConfig: {
        // displayAllHeaders: true, // 默认值：false，这里如果为true，将无法实现侧边栏目录动态展开效果

3、效果