关于导航_sidebar，可以设置二级导航收缩功能

[HongqingCao]

建议导航可以设置收缩属性，可以配置是否展示和收缩单

[librae8226]

期待这个功能

[aitexiaoy]

自己加入了一段JS，与CSS
自己引入Jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 .sidebar-nav-parent-li {
 position: relative;
 }

 .sidebar-nav {
 padding-right: 10px;
 }

 .sidebar-nav .ul-after {
 content: '';
 width: 10px;
 height: 30px;
 /* background: red; */
 position: absolute;
 right: 10px;
 top: 0px;
 display: flex;
 align-items: center;
 }

 .ul-after-sanjiao {
 width: 0;
 height: 0;
 border-left: 8px solid #cecece;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 transition: transform 0.3s;
 position: relative;

 }

 .ul-after-sanjiao::after {
 content: '';
 width: 0;
 height: 0;
 position: absolute;
 top: -8px;
 left: -11px;
 border-left: 8px solid #fff;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 }

 .ul-after-sanjiao:hover {
 border-left: 8px solid #42b983;
 }

 .sidebar-nav-parent-li-shouqi .ul-after-sanjiao {
 transform: rotate(90deg);
 transition: transform 0.3s;
 }

plugins: [
 function (hook) {
 hook.doneEach(function () {

 let max_cengji = 3; //默认展开层级深度
 //添加箭头
 $('.sidebar-nav').find('li').each(function (i, e) {
 var el = e;
 if (el.nextSibling && el.nextSibling.tagName == 'UL') {
 $(el).addClass('sidebar-nav-parent-li').append(
 "<div class='ul-after'><div class='ul-after-sanjiao'></div></div>");
 }
 })

 //初始时候展开层级

 function find_children_li(dom, current_cengji) {
 if (dom) {
 current_cengji++;
 $($(dom).find('li').each(function (i, e) {
 var el = e;
 if (el.nextSibling && el.nextSibling.tagName == 'UL') {
 if (current_cengji >= max_cengji) {
 $(el.nextSibling).hide();
 $(el).addClass('sidebar-nav-parent-li-shouqi');
 }
 find_children_li(el.nextSibling, current_cengji);
 }
 }))
 } else {
 return
 }
 }

 find_children_li($('.sidebar-nav')[0], 0);

 //绑定事件
 $('.ul-after-sanjiao').on('click', function (e) {
 e.stopPropagation();
 e.preventDefault();
 var el = e.target.parentNode.parentNode.nextSibling;
 if (el) {
 $(el).toggle();
 if ($(e.target.parentNode.parentNode).hasClass('sidebar-nav-parent-li-shouqi')) {
 $(e.target.parentNode.parentNode).removeClass('sidebar-nav-parent-li-shouqi');
 } else {
 $(e.target.parentNode.parentNode).addClass('sidebar-nav-parent-li-shouqi');
 }
 }
 })
 })
 }
 ]

实现效果

[timaschew]

Please use English language.

[Wsine]

I wrote a small solution this afternoon, see #728

[hcdtc]

fixed plugin code:

plugins: [
 function (hook) {
 hook.doneEach(function () {

 let max_cengji = 1; //默认展开层级深度
 // 存在子节点则添加箭头
 $('.sidebar-nav').find('li>a').each(function (i, e) {
 var el = e;
 // 需要排除自动生成的章节标题类菜单
 if (el.nextSibling && el.nextSibling.tagName == 'UL' && !$(el.nextSibling).hasClass('app-sub-sidebar')) {
 $(el).addClass('sidebar-nav-parent-li').append(
 "<div class='ul-after'><div class='ul-after-sanjiao'></div></div>");
 }
 })

 // 初始时候展开层级
 function findChildrenLi(dom, current_cengji) {
 if (dom) {
 current_cengji++;
 $($(dom).find('li>a').each(function (i, e) {
 var el = e;
 if (el.nextSibling && el.nextSibling.tagName == 'UL' && !$(el.nextSibling).hasClass('app-sub-sidebar')) {
 // 需要考虑：点击文章时，组件自动展开文章的标题作为子菜单，此时将会重新刷新菜单，但是会保留active状态，因此，需要排除这种菜单的误操作，否则将会自动收起所有
 if (current_cengji >= max_cengji && $(el.nextSibling).find('li.active').length < 1) {
 $(el.nextSibling).hide();
 $(el).addClass('sidebar-nav-parent-li-shouqi');
 }
 findChildrenLi(el.nextSibling, current_cengji);
 }
 }))
 } else {
 return
 }
 }

 findChildrenLi($('.sidebar-nav')[0], 0);

 // 绑定点击事件
 $('.sidebar-nav-parent-li').on('click', function (e) {
 e.stopPropagation();
 e.preventDefault();
 var el = e.target.nextSibling;
 if (el) {
 $(el).toggle();
 if ($(e.target).hasClass('sidebar-nav-parent-li-shouqi')) {
 $(e.target).removeClass('sidebar-nav-parent-li-shouqi');
 } else {
 $(e.target).addClass('sidebar-nav-parent-li-shouqi');
 }
 }
 });
 // end of bind
 });
 // end of hook function invoke
 }, // end of hook
 ],
 // plugins结束