sidebar items expand/collapse when click the arrow icon before item.

index.html

@@ -37,7 +37,7 @@
       loadNavbar: true,
       mergeNavbar: true,
       maxLevel: 4,
-      subMaxLevel: 2,
+      subMaxLevel: 6,
       name: 'docsify',
       search: {
         noData: {

src/core/event/scroll.js

@@ -1,8 +1,8 @@
-import Tweezer from 'tweezer.js';
 import { isMobile } from '../util/env';
 import * as dom from '../util/dom';
 import { removeParams } from '../router/util';
 import config from '../config';
+import Tweezer from 'tweezer.js';
 
 const nav = {};
 let hoverOver = false;
@@ -38,6 +38,7 @@ function highlight(path) {
   const anchors = dom.findAll('.anchor');
   const wrap = dom.find(sidebar, '.sidebar-nav');
   let active = dom.find(sidebar, 'li.active');
+  let parents = dom.findAll(sidebar, 'li.parent');
   const doc = document.documentElement;
   const top = ((doc && doc.scrollTop) || document.body.scrollTop) - coverHeight;
   let last;
@@ -70,6 +71,9 @@ function highlight(path) {
   li.classList.add('active');
   active = li;
 
+  parents.forEach(node => node.classList.remove('parent'));
+  active = findParents(active);
+
   // Scroll into view
   // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297
   if (!hoverOver && dom.body.classList.contains('sticky')) {
@@ -85,6 +89,31 @@ function highlight(path) {
   }
 }
 
+function findParents(active) {
+  if (!active) {
+    return active;
+  }
+
+  let top = active;
+  let node = active.parentNode;
+
+  while (node) {
+    if (node.classList.contains('app-sub-sidebar')) {
+      node = node.parentNode;
+      continue;
+    } else if (node.classList.contains('has-children')) {
+      node.classList.add('parent');
+      if (node.classList.contains('collapse')) {
+        top = node;
+      }
+      node = node.parentNode;
+      continue;
+    } else {
+      return top;
+    }
+  }
+}
+
 function getNavKey(path, id) {
   return `${decodeURIComponent(path)}?id=${decodeURIComponent(id)}`;
 }
@@ -149,8 +178,12 @@ export function scrollIntoView(path, id) {
   const li = nav[getNavKey(path, id)];
   const sidebar = dom.getNode('.sidebar');
   const active = dom.find(sidebar, 'li.active');
+  const parents = dom.findAll(sidebar, 'li.parent');
   active && active.classList.remove('active');
+  parents.forEach(node => node.classList.remove('parent'));
+
   li && li.classList.add('active');
+  findParents(li);
 }
 
 const scrollEl = dom.$.scrollingElement || dom.$.documentElement;

src/core/event/sidebar.js

@@ -43,6 +43,13 @@ export function collapse(el) {
       target.nextSibling.classList.contains('app-sub-sidebar')
     ) {
       dom.toggleClass(target.parentNode, 'collapse');
+    } else if (
+      target.nodeName === 'SPAN' &&
+      target.nextSibling &&
+      target.nextSibling.classList &&
+      target.nextSibling.classList.contains('section-link')
+    ) {
+      dom.toggleClass(target.parentNode, 'collapse');
     }
   });
 }

src/core/render/compiler.js

@@ -1,4 +1,3 @@
-import marked from 'marked';
 import { isAbsolutePath, getPath, getParentPath } from '../router/util';
 import { isFn, merge, cached, isPrimitive } from '../util/core';
 import { tree as treeTpl } from './tpl';
@@ -12,6 +11,7 @@ import { paragraphCompiler } from './compiler/paragraph';
 import { taskListCompiler } from './compiler/taskList';
 import { taskListItemCompiler } from './compiler/taskListItem';
 import { linkCompiler } from './compiler/link';
+import marked from 'marked';
 
 const cachedLinks = {};
 
@@ -278,7 +278,7 @@ export class Compiler {
       }
 
       const tree = this.cacheTree[currentPath] || genTree(toc, level);
-      html = treeTpl(tree, '<ul>{inner}</ul>');
+      html = treeTpl(tree);
       this.cacheTree[currentPath] = tree;
     }
 

src/core/render/tpl.js

@@ -93,9 +93,14 @@ export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
 
   let innerHTML = '';
   toc.forEach(node => {
-    innerHTML += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`;
     if (node.children) {
+      innerHTML += `<li class="has-children">`;
+      innerHTML += `<span></span>`;
+      innerHTML += `<a class="section-link" href="${node.slug}">${node.title}</a>`;
       innerHTML += tree(node.children, tpl);
+      innerHTML += `</li>`;
+    } else {
+      innerHTML += `<li><span></span><a class="section-link" href="${node.slug}">${node.title}</a></li>`;
     }
   });
   return tpl.replace('{inner}', innerHTML);

src/themes/basic/_layout.styl

@@ -470,3 +470,33 @@ body.close
 
   40%, 80%
     transform rotate(10deg)
+
+.app-sub-sidebar
+  li
+    > span
+      &:after
+        content '\00A0'
+        font-size 12px
+        line-height 1em
+        padding 0 6px 0 0
+        float left
+
+  li.has-children
+    > span
+      &:after
+        writing-mode vertical-lr
+        content '\276F'
+        font-size 12px
+        line-height 1em
+        padding 12px 0 0 0
+        float left
+
+  li.has-children.collapse
+    > span
+      &:after
+        writing-mode horizontal-tb
+        content '\276F'
+        font-size 12px
+        line-height 1em
+        padding 9px 4px 0 2px
+        float left

src/themes/buble.styl

@@ -25,7 +25,8 @@ $sidebar-width = 16rem
   ul li ul
     padding 0
 
-  li.active
+  li.active,
+  li.collapse.parent
     a
       color #333
 

src/themes/dark.styl

@@ -33,7 +33,8 @@ body
   ul li ul
     padding 0
 
-  ul li.active > a
+  ul li.active > a,
+  li.collapse.parent > a
     color var(--theme-color, $color-primary)
     font-weight 600
 

src/themes/dolphin.styl

@@ -34,18 +34,12 @@ body
   ul li ul
     padding 0
 
-  ul li.active > a
+  ul li.active > a,
+  li.collapse.parent > a
     border-right 2px solid
     color var(--theme-color, $color-primary)
     font-weight 600
 
-.app-sub-sidebar
-  li
-    &::before
-      content '-'
-      padding-right 4px
-      float left
-
 /* markdown content found on pages */
 .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
   color #2c3e50

src/themes/vue.styl

@@ -34,18 +34,12 @@ body
   ul li ul
     padding 0
 
-  ul li.active > a
+  ul li.active > a,
+  li.collapse.parent > a
     border-right 2px solid
     color var(--theme-color, $color-primary)
     font-weight 600
 
-.app-sub-sidebar
-  li
-    &::before
-      content '-'
-      padding-right 4px
-      float left
-
 /* markdown content found on pages */
 .markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
   color #2c3e50