首頁猿問嵌套菜單未正確響應

嵌套菜單未正確響應

JavaScript

元芳怎么了 2022-09-29 17:13:54

問題：有沒有辦法改變設計，以便：加載新頁面時，菜單不會完全折疊，而是只有菜單的活動分支保持打開狀態(tài)，而其他分支則處于折疊狀態(tài)。在頁面加載時更改菜單中的滾動位置，以便當前選定的菜單項顯示在菜單可滾動區(qū)域的頂部我的頁面，因為它>>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（此站點在單擊菜單時重新加載整個頁面，就像我的頁面當前執(zhí)行的操作一樣）https://firebase.google.com/docs/admin/setup#c_4（此站點僅加載頁面的內(nèi)容部分，單擊菜單）謝謝圣注意根據(jù)下面給出的答案，上面鏈接中的代碼現(xiàn)已針對問題的第 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>使用液體/杰基爾的內(nèi)容頁面：每個內(nèi)容都有這樣的前置事項：布局：默認使用液體/杰基爾生成的導航欄：<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"><img src="/../docs/assets/images/chevron.png" class="chevron">{{ item.name }}</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條經(jīng)驗獲得超2個贊

檢查是否展開相應的組。我假設在最終的解決方案中，不同的菜單中不會有相同的鏈接。expandEntryOnLoad

對于滾動：搜索“滾動到元素”，您應該能夠?qū)崿F(xiàn)它。:)

提示：嘗試在問題中創(chuàng)建更簡約、可重現(xiàn)且可運行的代碼片段。這樣，人們就更愿意幫助你，因為它更省時。檢查一下：我被告知要用“堆棧片段”創(chuàng)建一個“可運行”的例子，我該怎么做？

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

}

<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"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 3

</li>

<li class="none"><a href="/docs/about.html">About</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 3.2

</li>

<li class="none"><a href="/docs/staff.html">Staff</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">People

</li>

</ul>

<li class="none"><a href="/docs/level4.html">Level 4</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5

</li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5.2

</li>

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

<li class="none"><a href="/docs/level4.html">Level 6</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 7

</li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5.2

</li>

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

<li class="none"><a href="/docs/level4.html">Level 8</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 9

</li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5.2

</li>

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

<li class="none"><a href="/docs/level4.html">Level 10</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 11

</li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5.2

</li>

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

<li class="none"><a href="/docs/level4.html">Level 12</a></li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 13

</li>

<li class="treeitem"><img src="/../docs/assets/images/chevron.png" class="chevron">Level 5.2

</li>

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

反對回復 2022-09-29

1 回答
0 關注
99 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

嵌套菜單未正確響應

嵌套菜單未正確響應

1 回答

添加回答