问题：有没有办法改变设计，以便：加载新页面时，菜单不会完全折叠，而是只有菜单的活动分支保持打开状态，而其他分支则处于折叠状态。在页面加载时更改菜单中的滚动位置，以便当前选定的菜单项显示在菜单可滚动区域的顶部我的页面，因为它>>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：（用鼠标点击时展开/折叠菜单元素） /** *展开或折叠菜单 */
1 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
检查是否展开相应的组。我假设在最终的解决方案中，不同的菜单中不会有相同的链接。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 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 & 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>
添加回答
举报
0/150
提交
取消