search

docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.57k stars 5.67k forks source link

有办法能将左边的文档目录配置成可折叠的吗？ #621

Closed frapples closed 5 years ago

frapples commented 6 years ago

您好，由于文档较多，侧边栏内容展开的非常长，有办法将其折叠吗？

xiao2752271456 commented 6 years ago

关注

librae8226 commented 6 years ago

是不是可以考虑用文件夹的形式来组织文档，同时在左侧对应显示目录和文档名，右侧显示锚点toc？

kbrx93 commented 6 years ago

有同样的需求，mark

sorrrrrymybad commented 5 years ago

$(".sidebar-nav ul li").live("click",function(){ var words = $(this).find("span").html(); var nextTagName = $(this).next().prop("tagName"); if(nextTagName == "UL"){ $(this).next().toggle();
} }) 我外部加入了一段js代码实现了此功能

aitexiaoy commented 5 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

keer6 commented 5 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

用了好像并没有什么效果哇。

aitexiaoy commented 5 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

用了好像并没有什么效果哇。

你可以调试一下代码，看看CSS样式作用上了没。

keer6 commented 5 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

用了好像并没有什么效果哇。

你可以调试一下代码，看看CSS样式作用上了没。

唔，没有。。。是直接copy你的代码，JS倒是有进去，但是没用，不知道什么情况，能否加个qq教一下小白~~~ 跪谢 873675391

timaschew commented 5 years ago

Please use English language.

keer6 commented 5 years ago

Please use English language. Is there any way to configure the document directory on the left to be collapsible?

Wsine commented 5 years ago

I wrote a small solution this afternoon, see #728

w1024k commented 4 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

有完整的案例吗,我尝试了,并没有生效

aitexiaoy commented 4 years ago

自己加入了一段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');
                }
              }
            })
          })
        }
      ]

实现效果 image

有完整的案例吗,我尝试了,并没有生效

你配置了_silder的话，docsifyjs可以自动折叠。

funye commented 4 years ago

网上找到一个折叠的 https://github.com/iPeng6/docsify-sidebar-collapse