I wrote a small solution this afternoon, although it may waste more calculation resource.

window.$docsify = {
  plugins: [
    function(hook, vm) {
      hook.doneEach(function() {
        document.querySelectorAll(".sidebar-nav > ul > li").forEach(
          function(node, index, nodelist) {
            var span = document.createElement("span");
            span.innerHTML = node.firstChild.data;
            span.style.cursor = "pointer";
            span.onclick = function(event) {
              var ul = event.target.nextElementSibling;
              if (ul.style.display === "none") {
                ul.style.display = "block";
              } else {
                ul.style.display = "none";
              }
            };
            node.firstChild.replaceWith(span);
            node.lastChild.style.display = "none";
        });
        var active = document.querySelector(".sidebar-nav li.active");
        if (active) {
          active.parentElement.style.display = "block";
        }
      });
    }
  ]
}

there is also a live demo. => https://wsine.github.io/blog

当一章只有一级的时候,这章就不显示了

当一章只有一级的时候,这章就不显示了

+1

I wrote a small solution this afternoon, although it may waste more calculation resource.

window.$docsify = {
  plugins: [
    function(hook, vm) {
      hook.doneEach(function() {
        document.querySelectorAll(".sidebar-nav > ul > li").forEach(
          function(node, index, nodelist) {
            var span = document.createElement("span");
            span.innerHTML = node.firstChild.data;
            span.style.cursor = "pointer";
            span.onclick = function(event) {
              var ul = event.target.nextElementSibling;
              if (ul.style.display === "none") {
                ul.style.display = "block";
              } else {
                ul.style.display = "none";
              }
            };
            node.firstChild.replaceWith(span);
            node.lastChild.style.display = "none";
        });
        var active = document.querySelector(".sidebar-nav li.active");
        if (active) {
          active.parentElement.style.display = "block";
        }
      });
    }
  ]
}

there is also a live demo. => https://wsine.github.io/blog

@Wsine Can you refactor this a bit as per your choice and submit a PR to add this plugin in the docs.
Publish this as a plugin and submit it in the docs

@anikethsaha Well, it seems that current version did not satisfy all the demands on collapsable sidebar. I will try my best when I have time.

Sure👍

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

very good!

view my site: https://kepan.org/docsify

i have many heading levels (up to 108), i want the sidebar items can be expand & collapse.

like Typora's side bar, that's very good! it can expand, collapse, and sync scroll.

Is this still the best way to achieve this? I see various things kicking around when i search for it.

This looks to be a duplicate of issue #900, which also includes a PR.