publish style fix css

Author: iPeng6

README.md

@@ -59,11 +59,12 @@ Then insert script into document just like the [official plugins](https://docsif
 ## Style demo
 
 - arrow style
-
-  Reference: [sidebar.css](./src/sidebar.css)
+  ```html
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
+  ```
 
 - folder style
-
-  Reference: [sidebar-folder.css](./src/sidebar-folder.css)
-
+  ```html
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
+  ```
   ![](assets/style-folder.jpg)

dist/docsify-sidebar-collapse.js

@@ -31,7 +31,7 @@
     }
   }
 
-  var css = ".sidebar-nav > ul > li ul {\n  display: none;\n}\n\n.app-sub-sidebar {\n  display: none;\n}\n\n.app-sub-sidebar.open {\n  display: block;\n}\n\n.sidebar-nav .open > ul:not(.app-sub-sidebar),\n.sidebar-nav .active:not(.hold) > ul {\n  display: block;\n}\n\n.active + ul.app-sub-sidebar {\n  display: block;\n}\n";
+  var css = ".sidebar-nav > ul > li ul {\n  display: none;\n}\n\n.app-sub-sidebar {\n  display: none;\n}\n\n.app-sub-sidebar.open {\n  display: block;\n}\n\n.sidebar-nav .open > ul:not(.app-sub-sidebar),\n.sidebar-nav .active:not(.collapse) > ul {\n  display: block;\n}\n\n.active + ul.app-sub-sidebar {\n  display: block;\n}\n";
   styleInject(css);
 
   var lastTop = 0; // 侧边栏滚动状态
@@ -116,32 +116,46 @@
       } // fix #11 空行问题
 
 
-      if (e.target.parentNode && e.target.parentNode.tagName === 'LI') {
+      if (e.target.tagName === 'P' && e.target.parentNode && e.target.parentNode.tagName === 'LI') {
         e.target.parentNode.classList.toggle('open');
       }
 
       if (e.target.tagName === 'A') {
-        var elp = e.target.parentElement;
+        var elp = findTagParent(e.target, 'LI', 2);
 
-        if (elp.tagName === 'LI') {
+        if (elp) {
           if (elp.classList.contains('open')) {
             requestAnimationFrame(function () {
               elp.classList.add('collapse');
               elp.classList.remove('open');
-              elp.classList.add('hold');
             });
           } else {
             requestAnimationFrame(function () {
-              if (elp.classList.contains('hold')) {
+              if (elp.classList.contains('collapse')) {
                 elp.classList.remove('collapse');
-                elp.classList.add('open');
-                elp.classList.remove('hold');
               }
+
+              elp.classList.add('open');
             });
           }
         }
       }
     }, true);
   });
 
+  function findTagParent(curNode, tagName, level) {
+    var l = 0;
+
+    while (curNode) {
+      l++;
+      if (l > level) return;
+
+      if (curNode.parentNode.tagName === tagName) {
+        return curNode.parentNode;
+      }
+
+      curNode = curNode.parentNode;
+    }
+  }
+
 })));

dist/docsify-sidebar-collapse.min.js

@@ -1,6 +1,6 @@
 {
   "name": "docsify-sidebar-collapse",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "sidebar-collapse plugin for docsify",
   "main": "src",
   "scripts": {
@@ -9,6 +9,7 @@
     "build": "run-s build:*",
     "build:rollup": "rollup -c",
     "build:minify": "uglifyjs --compress --mangle --output ./dist/docsify-sidebar-collapse.min.js -- ./dist/docsify-sidebar-collapse.js",
+    "build:css": "cleancss -o dist/sidebar.min.css src/sidebar.css &&cleancss -o dist/sidebar-folder.min.css src/sidebar-folder.css",
     "pb": "npm run build && npm publish"
   },
   "repository": {
@@ -33,6 +34,7 @@
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.1.6",
+    "clean-css-cli": "^4.3.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.2",
     "rollup": "^0.67.3",

dist/sidebar-folder.min.css

@@ -95,26 +95,28 @@ document.addEventListener('DOMContentLoaded', () => {
         e.target.classList.toggle('open')
       }
       // fix #11 空行问题
-      if (e.target.parentNode && e.target.parentNode.tagName === 'LI') {
+      if (
+        e.target.tagName === 'P' &&
+        e.target.parentNode &&
+        e.target.parentNode.tagName === 'LI'
+      ) {
         e.target.parentNode.classList.toggle('open')
       }
 
       if (e.target.tagName === 'A') {
-        const elp = e.target.parentElement
-        if (elp.tagName === 'LI') {
+        const elp = findTagParent(e.target, 'LI', 2)
+        if (elp) {
           if (elp.classList.contains('open')) {
             requestAnimationFrame(() => {
               elp.classList.add('collapse')
               elp.classList.remove('open')
-              elp.classList.add('hold')
             })
           } else {
             requestAnimationFrame(() => {
-              if (elp.classList.contains('hold')) {
+              if (elp.classList.contains('collapse')) {
                 elp.classList.remove('collapse')
-                elp.classList.add('open')
-                elp.classList.remove('hold')
               }
+              elp.classList.add('open')
             })
           }
         }
@@ -123,3 +125,15 @@ document.addEventListener('DOMContentLoaded', () => {
     true
   )
 })
+
+function findTagParent(curNode, tagName, level) {
+  let l = 0
+  while (curNode) {
+    l++
+    if (l > level) return
+    if (curNode.parentNode.tagName === tagName) {
+      return curNode.parentNode
+    }
+    curNode = curNode.parentNode
+  }
+}

dist/sidebar.min.css

@@ -11,7 +11,7 @@
 }
 
 .sidebar-nav .open > ul:not(.app-sub-sidebar),
-.sidebar-nav .active:not(.hold) > ul {
+.sidebar-nav .active:not(.collapse) > ul {
   display: block;
 }