Javascript 嵌套菜单没有正确响应_Javascript_Html_Css_Jekyll

Javascript 嵌套菜单没有正确响应

javascript html css jekyll

Javascript 嵌套菜单没有正确响应,javascript,html,css,jekyll,Javascript,Html,Css,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 }}<

问题：

<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>

/* 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);
}

是否有办法改变设计，以便：

加载新页面时，菜单不会完全折叠，而是只有菜单的活动分支保持打开，其他分支折叠

在页面加载时更改菜单中的滚动位置，使当前选定的菜单项显示在菜单可滚动区域的顶部

我的页面，按原样>>

此处正确展示了两种预期行为：

（此站点通过单击菜单重新加载整个页面，就像我的页面当前所做的那样）

（此网站仅在单击菜单时加载页面的内容部分）

谢谢

圣

注：根据下面给出的答案，上述链接中的代码现在已更新为问题的第1部分

布局页面的结构：

<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>

/* 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);
}

高级布局：

<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>

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

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

选中

expandEntryOnLoad

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

对于滚动：搜索“滚动到元素”，您应该能够实现它。：）

提示：试着在你的问题中创建更多最小的、可复制的和可运行的代码片段。这样一来，人们会更愿意帮助你，因为这样更省时。选中此项：

//将此方法移动到“树”。我只是把它放在最上面，这样很容易找到。
函数expandEntryOnLoad（）{
//仅用于测试。在生产中使用以下目标。
让target=“/docs/people.html”；
//让target=window.location.pathname；
//查找第一个目标为href的“a”
让a=[…document.querySelectorAll（“.toc a”）].find（a=>a.pathname===target）；
//展开所有树组父级。
如果（a）{
让父=a；
while（parent=parent.parentElement.closest（.treegroup））parent.classList.add（“展开”）
}
}
//使用给定的选择器查找父项
函数父对象按选择器（元素、cls、停止选择器='body'）{
//注：简化，因为已经有一个函数用于此。
返回元素最近（“.”+cls）
};
//查找特定类的下一个同级
功能下一个周期（elem、cls）{
while（elem=elem.nextElementSibling）{
if（HASSCLASS（要素、cls））{
返回元素；
}
}
返回null；
}
//查找特定类的上一个同级
函数previousByClass（元素、cls）{
while（elem=elem.previouselement同级）{
if（HASSCLASS（要素、cls））{
返回元素；
}
}
返回null；
}
//找到兄弟类？
函数类（elem、cls）{
//注意：简化了，因为有一种更容易检查的方法。您已经在多个地方使用了它。
返回元素classList.contains（cls）；
}
“严格使用”；
函数树（）{
让menu=document.querySelector（'.toc'）；
让elements=menu.getElementsByClassName（“treeitem”）；
设sibling=null；
让扩展=假；
eventListeners（）；
函数eventListeners（）{
//听一听咔嗒声
数组.from（元素）.forEach（函数（元素）{
元素。addEventListener（'click'，函数（ev）{
设e=null；
包含（“treeitem”）？e=ev.target:e=parent_by_选择器（ev.target，“treeitem”）；
同级=下一个循环（e，“树组”）
包含（'is-expanded'）？expanded=true:expanded=false；
如果（扩展）{
e、 类列表。删除（“扩展”）；
sibling.classList.remove（“扩展”）；
}否则{
e、 添加（“已展开”）；
sibling.classList.add（“扩展”）；
}
}，假）；
});
}
expandEntryOnLoad（）；
};
//在启动功能之前，等待文档加载完毕
addEventListener（'DOMContentLoaded'，tree（））
/*可折叠*/
ul.toc>ul.treegroup:not（.is expansed）{
显示：无；
}
/*V形*/
雪佛龙先生{
高度：0.5雷姆；
宽度：0.5雷姆；
}
.树木扩张器{
位置：相对位置；
光标：指针；
用户选择：无；
显示：块；
左侧填充：0px；
填充顶部：0px；
垫底：0px；
}
.树指示器{
显示：内联块；
位置：绝对位置；
文本对齐：居中；
线高：16px；
顶部：6px；
左：-1.5em；
颜色：#5e5e；
字体大小：0.6rem；
转换：转换0.15秒缓进缓出；
变换：旋转（0度）；
}
.treeitem.已展开>.tree expander>.tree指示器{
变换：旋转（90度）；
}




三级




第3.2级



人




第5级



5.2级







第7级



5.2级







第9级



5.2级




/* 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);
}