嵌套菜单未正确响应

Question

问题：

有没有办法改变设计，以便：

加载新页面时，菜单不会完全折叠，而是只有菜单的活动分支保持打开状态，而其他部分则折叠。
在页面加载时更改菜单中的滚动位置，使当前选定的菜单项显示在菜单可滚动区域的顶部

我的页面，现状 >> https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html

此处正确显示了两种所需的行为：

https://docs.microsoft.com/en-gb/dotnet/csharp/tutorials/intro-to-csharp/branches-and-loops-local （此站点重新加载整个页面，在菜单上单击，就像我的页面当前所做的那样）
https://firebase.google.com/docs/admin/setup#c_4 （本网站仅加载页面的内容部分，点击菜单）

谢谢

ST

注意上面 link 中的代码现在已经根据下面给出的答案更新了问题的第 1 部分

布局页面结构：

高层布局：

<html>
<head></head>
<body>
<header></header>
<div class = "middle section">
<div class = "left side-bar">
{% include navigation.html %}
</div>
<div class = "contents">
{{content}}
</div>
</div>
<footer></footer>
</body>
</html>

内容页使用 LIQUID/JEKYLL:

每个内容都有这样的开头：

布局：默认

使用 LIQUID/JEKYLL 生成的导航栏:

<ul class="treegroup">
  {% for item in include.nav %}
    {% if item.link %}
      <li {% if item.link == page.url | prepend:site.baseurl %} class="is-active"{% endif %} class="none"><a href="{{ item.link }}">{{ item.name }}</a></li>
    {% else %}
      <li {% if item.link == page.url | prepend:site.baseurl %} class="is-active"{% endif %} class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>{{ item.name }}</span></li>
    {% endif %}
        {% if item.tree %}
          {% include navigation.html nav=item.tree %}
        {% else %}  
        {% endif %}
      </li>
  {% endfor %}
</ul>

LIQUID/JEKYLL使用的 YML NAV 文件（在上面的 Liquid/Jekll 代码中使用）

tree:
- name: Level 1
  link: /docs/level1.html
- name: Level 2
  link: /docs/level2.html
- name: Level 3
  tree:
  - name: Home  
    link: /docs/index.html
  - name: About
    link: /docs/about.html
  - name: Level 3.2
    tree:
      - name: Staff
        link: /docs/staff.html
      - name: People
- name: Level 4
  link: /docs/level4.html
- name: Level 5
  tree:
  - name: Blog
    link: /docs/blog.html
  - name: Level 5.2
    tree:
      - name: Branches & Loops
        link: /docs/data-integration-and-etl/branches-and-loops-local.html
      - name: People
        link: /docs/people.html

JAVASCRIPT 在边栏上： （用鼠标单击时展开/折叠菜单元素） /** *展开或折叠菜单 */

"use strict";
(function tree() {
    let menu = document.querySelector('.toc');
    let elements = menu.getElementsByClassName("treeitem");
    let sibling = null;
    let expanded = false;

    eventListeners();

    function eventListeners(){
        // Listen for click
        Array.from(elements).forEach(function(element) {
            element.addEventListener('click', function(ev) {
                let e = null;
                ev.target.classList.contains("treeitem") ? e = ev.target : e = parent_by_selector(ev.target, "treeitem");
                sibling = nextByClass(e, "treegroup")

                sibling.classList.contains('is-expanded') ? expanded = true : expanded = false;  
                    if(expanded){
                        e.classList.remove("is-expanded");
                        sibling.classList.remove("is-expanded");
                    } else {
                        e.classList.add("is-expanded");
                        sibling.classList.add("is-expanded");
                    } 
            }, false);
          });
    }

})();

// WAIT TILL DOCUMENT HAS LOADED BEFORE INITIATING FUNCTIONS
document.addEventListener('DOMContentLoaded', tree);

上面脚本中使用的其他 JS 函数 （辅助函数）

// Find parent with given selector
function parent_by_selector(elem, selector, stop_selector = 'body') {
    let parent = elem;
    while (true) {
      if (parent.classList.contains(stop_selector)) break;
      if (parent.classList.contains(selector)) break;
      parent = parent.parentElement; // get upper parent and check again
    }
    if (parent.classList.contains(stop_selector)) parent = null; // when parent is a tag 'body' -> parent not found
    return parent;
  };

// Find child with given selector
function child_by_selector(elem, selector) {
    let children = elem.childNodes;
    for (let i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(selector) >= 0) {
            return children[i];
         }
     }
     for (let i = 0; i < children.length; i++) {
         let child = child_by_selector(children[i], selector);
         if (child !== null) {
             return child;
         }
     }
     return null;
}

// Find next sibling of particular class
function nextByClass(elem, cls) {
    while (elem = elem.nextElementSibling) {
        if (hasClass(elem, cls)) {
            return elem;
        }
    }
    return null;
}

// Find previous sibling of particular class
function previousByClass(elem, cls) {
    while (elem = elem.previousElementSibling) {
        if (hasClass(elem, cls)) {
            return elem;
        }
    }
    return null;
}

// Sibling class found?
function hasClass(elem, cls) {
    let str = " " + elem.className + " ";
    let testCls = " " + cls + " ";
    return(str.indexOf(testCls) != -1) ;
}

CSS 用于边栏：

/* Collapsable */
ul.toc > ul .treegroup:not(.is-expanded){
  display: none;
}

/* Chevron */
.chevron{
height:0.5rem;
width: 0.5rem;

}
.tree-expander{
  position: relative;
  cursor: pointer;
  user-select: none;
  display: block;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.tree-indicator{
  display: inline-block;
  position: absolute;
  text-align: center;
  line-height: 16px;
  top: 6px;
  left: -1.5em;
  color: #5e5e5e;
  font-size: 0.6rem;
  transition: transform 0.15s ease-in-out;
  transform: rotate(0deg);
}

.treeitem.is-expanded > .tree-expander > .tree-indicator {
  transform: rotate(90deg);
}

Answer 1

勾选expandEntryOnLoad展开相应的组。我假设最终的解决方案在不同的菜单中不会有相同的链接。

对于滚动：搜索"scroll to element"，你应该可以实现它。 :)

提示：尝试在您的问题中创建更多最小、可重现和可运行的代码片段。这样人们会更愿意帮助你，因为这样会节省时间。检查这个：I've been told to create a "runnable" example with "Stack Snippets", how do I do that?

// Move this method to "tree". I just put it at the top so it's easy to find.
function expandEntryOnLoad() {
  // Just for testing. Use the target below in production.
  let target = "/docs/people.html";
  // let target = window.location.pathname;

  // Find first "a" with the target as href
  let a = [...document.querySelectorAll(".toc a")].find(a => a.pathname === target);
  // Expand all tree group parents.
  if (a) {
    let parent = a;
    while (parent = parent.parentElement.closest(".treegroup")) parent.classList.add("is-expanded")
  }
}

// Find parent with given selector
function parent_by_selector(elem, cls, stop_selector = 'body') {
  // NOTE: Simplified since there is already a function for that.
  return elem.closest("." + cls)
};

// Find next sibling of particular class
function nextByClass(elem, cls) {
  while (elem = elem.nextElementSibling) {
    if (hasClass(elem, cls)) {
      return elem;
    }
  }
  return null;
}

// Find previous sibling of particular class
function previousByClass(elem, cls) {
  while (elem = elem.previousElementSibling) {
    if (hasClass(elem, cls)) {
      return elem;
    }
  }
  return null;
}

// Sibling class found?
function hasClass(elem, cls) {
  // NOTE: simplified, since there is an easier way to check this. You are already using it at several places.
  return elem.classList.contains(cls);
}

"use strict";

function tree() {
  let menu = document.querySelector('.toc');
  let elements = menu.getElementsByClassName("treeitem");
  let sibling = null;
  let expanded = false;

  eventListeners();

  function eventListeners() {
    // Listen for click
    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', function(ev) {
        let e = null;
        ev.target.classList.contains("treeitem") ? e = ev.target : e = parent_by_selector(ev.target, "treeitem");
        sibling = nextByClass(e, "treegroup")

        sibling.classList.contains('is-expanded') ? expanded = true : expanded = false;
        if (expanded) {
          e.classList.remove("is-expanded");
          sibling.classList.remove("is-expanded");
        } else {
          e.classList.add("is-expanded");
          sibling.classList.add("is-expanded");
        }
      }, false);
    });
  }

  expandEntryOnLoad();
};

// WAIT TILL DOCUMENT HAS LOADED BEFORE INITIATING FUNCTIONS
document.addEventListener('DOMContentLoaded', tree());

/* Collapsable */

ul.toc>ul .treegroup:not(.is-expanded) {
  display: none;
}


/* Chevron */

.chevron {
  height: 0.5rem;
  width: 0.5rem;
}

.tree-expander {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: block;
  padding-left: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.tree-indicator {
  display: inline-block;
  position: absolute;
  text-align: center;
  line-height: 16px;
  top: 6px;
  left: -1.5em;
  color: #5e5e5e;
  font-size: 0.6rem;
  transition: transform 0.15s ease-in-out;
  transform: rotate(0deg);
}

.treeitem.is-expanded>.tree-expander>.tree-indicator {
  transform: rotate(90deg);
}

<ul class="toc is-vertically-scrollable has-flex-grow has-flex-shrink">
  <ul class="treegroup">
    <li class="none"><a href="/docs/level1.html">Level 1</a></li>
    <li class="none"><a href="/docs/level2.html">Level 2</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 3</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/index.html">Home</a></li>
      <li class="none"><a href="/docs/about.html">About</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 3.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/staff.html">Staff</a></li>
        <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>People</span>
        </li>
      </ul>
    </ul>
    <li class="none"><a href="/docs/level4.html">Level 4</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/blog.html">Blog</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/data-integration-and-etl/branches-and-loops-local.html">Branches &amp; Loops and everthing else in the world that is in between</a></li>
        <li class="none"><a href="/docs/people.html">People</a></li>
      </ul>
    </ul>
    <li class="none"><a href="/docs/level4.html">Level 6</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 7</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/blog.html">Blog</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/data-integration-and-etl/branches-and-loops-local.html">Branches &amp; Loops</a></li>
        <li class="none"><a href="/docs/people.html">People</a></li>
      </ul>
    </ul>
    <li class="none"><a href="/docs/level4.html">Level 8</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 9</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/blog.html">Blog</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/data-integration-and-etl/branches-and-loops-local.html">Branches &amp; Loops</a></li>
        <li class="none"><a href="/docs/people.html">People</a></li>
      </ul>
    </ul>
    <li class="none"><a href="/docs/level4.html">Level 10</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 11</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/blog.html">Blog</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/data-integration-and-etl/branches-and-loops-local.html">Branches &amp; Loops</a></li>
        <li class="none"><a href="/docs/people.html">People</a></li>
      </ul>
    </ul>
    <li class="none"><a href="/docs/level4.html">Level 12</a></li>
    <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 13</span>
    </li>
    <ul class="treegroup">
      <li class="none"><a href="/docs/blog.html">Blog</a></li>
      <li class="treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>Level 5.2</span>
      </li>
      <ul class="treegroup">
        <li class="none"><a href="/docs/data-integration-and-etl/branches-and-loops-local.html">Branches &amp; Loops</a></li>
        <li class="none"><a href="/docs/people.html">People</a></li>
      </ul>
    </ul>
  </ul>
</ul>

嵌套菜单未正确响应

Nested Menu not responding correctly

html

javascript

css

jekyll