嵌套菜单未正确响应
问题：
有没有办法改变设计，以便：
加载新页面时，菜单不会完全折叠，而是只有菜单的活动分支保持打开状态，而其他分支则处于折叠状态。
在页面加载时更改菜单中的滚动位置，以便当前选定的菜单项显示在菜单可滚动区域的顶部
我的页面，因为它>>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（此站点仅加载页面的内容部分，单击菜单）
谢谢
圣
注意 根据下面给出的答案，上面链接中的代码现已针对问题的第 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>
使用液体/杰基尔的内容页面：
每个内容都有这样的前置事项：
布局：默认
使用液体/杰基尔生成的导航栏：
<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>
液体/杰基尔使用的YML导航文件（如上面的液体/杰克尔代码中使用的）
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
侧边栏上的JAVASCRIPT：（用鼠标点击时展开/折叠菜单元素） /** *展开或折叠菜单 */
元芳怎么了浏览 124回答 1
1回答
-
慕姐8265434
检查是否展开相应的组。我假设在最终的解决方案中，不同的菜单中不会有相同的链接。expandEntryOnLoad对于滚动：搜索“滚动到元素”，您应该能够实现它。:)提示：尝试在问题中创建更简约、可重现且可运行的代码片段。这样，人们就更愿意帮助你，因为它更省时。检查一下：我被告知要用“堆栈片段”创建一个“可运行”的例子，我该怎么做？// 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 selectorfunction 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 classfunction nextByClass(elem, cls) { while (elem = elem.nextElementSibling) { if (hasClass(elem, cls)) { return elem; } } return null;}// Find previous sibling of particular classfunction 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 FUNCTIONSdocument.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 & 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 & 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 & 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 & 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 & Loops</a></li> <li class="none"><a href="/docs/people.html">People</a></li> </ul> </ul> </ul></ul>
随时随地看视频慕课网APP
相关分类
JavaScript