Fix TOC height calculation for wrapped headings (#984)

This commit is contained in:
Mimi 2026-08-05 01:15:32 +08:00 committed by GitHub
parent 854e2006b6
commit 091af0fd4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -336,8 +336,6 @@ NexT.utils = {
const target = navItemList[index]; const target = navItemList[index];
if (!target || target.classList.contains('active-current')) return; if (!target || target.classList.contains('active-current')) return;
const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
nav.querySelectorAll('.active').forEach(navItem => { nav.querySelectorAll('.active').forEach(navItem => {
navItem.classList.remove('active', 'active-current'); navItem.classList.remove('active', 'active-current');
}); });
@ -350,9 +348,13 @@ NexT.utils = {
if (activateEle.classList.contains('nav-item')) { if (activateEle.classList.contains('nav-item')) {
activateEle.classList.add('active'); activateEle.classList.add('active');
} else { // .nav-child or .nav } else { // .nav-child or .nav
// scrollHeight isn't reliable for transitioning child items. // Exclude nested lists so each item's own wrapped row is counted once.
const listItemHeight = [...activateEle.children].reduce((height, navItem) => {
const navChild = [...navItem.children].find(element => element.classList.contains('nav-child'));
return height + navItem.getBoundingClientRect().height - (navChild?.getBoundingClientRect().height || 0);
}, 0);
// The last nav-item in a list has a margin-bottom of 5px. // The last nav-item in a list has a margin-bottom of 5px.
navChildHeight += (singleHeight * activateEle.childElementCount) + 5; navChildHeight += listItemHeight + 5;
activateEle.style.setProperty('--height', `${navChildHeight}px`); activateEle.style.setProperty('--height', `${navChildHeight}px`);
} }
activateEle = activateEle.parentElement; activateEle = activateEle.parentElement;