Clicking space between arrow and text leads to collapsing higher-level menu

iPeng6 / docsify-sidebar-collapse

a docsify plugin, support sidebar catalog expand and collapse

MIT License

176 stars 37 forks source link

Clicking space between arrow and text leads to collapsing higher-level menu #45

Open agats1301 opened 9 months ago

agats1301 commented 9 months ago

Steps to reproduce

Open the second level menu (in our case it's 'Devops')
Click space between arrow and 'Devops'
Observe that 'Documentation' menu is collapsed

Expected behaviour: Only current level menu (in our case it's 'Devops' menu) should be collapsed.

PenNameLuXun commented 6 months ago

you can use css to avoid :

Add li.folder{padding-left: 4px;} to the end of the vue.css file.

in file sidebar.min.css,find .sidebar-nav ul:not(.app-sub-sidebar)>li:not(.file)::before ,adjust the attri left to -7px:

.sidebar-nav ul:not(.app-sub-sidebar)>li:not(.file)::before{content:'';display:block;position:absolute;top:11px;left:-7px;height:6px;width:6px;border-right:1px solid #505d6b;border-bottom:1px solid #505d6b;transform:rotate(-45deg);transition:transform .1s}

agats1301 commented 6 months ago

I've tried the solution above and it works, however, I've noticed that clicking at the top and left of the arrow leads to the higher-level menu collapsing as well: