本文介绍一种在同时关闭旧子菜单与展开新子菜单（均带 height 过渡）时，确保新菜单标题始终锚定在视口顶部的专业解决方案，避免因滚动偏移导致用户丢失焦点。
本文介绍一种在同时关闭旧子菜单与展开新子菜单（均带 height 过渡）时，确保新菜单标题始终锚定在视口顶部的专业解决方案，避免因滚动偏移导致用户丢失焦点。
在构建具有层级折叠能力的固定高度导航栏（如移动端侧边栏或桌面端垂直导航）时，一个常见却棘手的问题是：当用户快速切换两个垂直位置相距较远的子菜单（例如从顶部“Submenu 1”直接点击底部“Submenu 2”）时，由于两者同时执行 height 过渡动画——前者收缩、后者展开——浏览器会因 DOM 高度突变触发自动滚动，导致新展开的子菜单标题被推至视口外，严重影响可用性。
核心挑战在于：过渡期间 DOM 高度动态变化 → 父容器 .navbar 的 scrollTop 值被浏览器重置或误判 → 新内容不可见。单纯等待所有过渡结束再滚动（如监听 transitionend 后统一 scroll）会造成明显卡顿；而串行执行（先关后开）又违背“即时响应”的交互直觉。
✅ 正确解法是：将滚动行为精确绑定到新子菜单的 transitionend 事件，并基于其相对于父容器的实时位置计算目标滚动偏移量。关键点如下：
- 精准时机控制：不在点击瞬间滚动，而是在新子菜单的 height 过渡完成（即 transitionend 触发）后立即执行平滑滚动；
- 相对定位计算：使用 openedSubmenu.offset().top - navbar.offset().top + navbar.scrollTop() 获取子菜单标题在 .navbar 内部的绝对 Y 坐标，该值不受外部滚动干扰，确保定位稳定；
- 动画同步：滚动持续时间（325ms）与 height 过渡时长严格一致，视觉上形成“展开+滚动”无缝衔接效果；
- 事件防重复绑定：每次调用 toggleSubmenu 前先 .off('transitionend')，避免多次点击累积监听器导致回调重复执行。
以下是优化后的核心逻辑（已兼容 jQuery 3.7+）：
function toggleSubmenu($submenu, isOpen, callback) {
const $submenuContent = $submenu.find(".submenu-content");
if (isOpen) {
// 展开：设置目标高度并添加 opened 类
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenu.addClass("opened");
} else {
// 收缩：先设为当前高度触发 reflow，再设为 0
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenuContent.get(0).offsetHeight; // 强制重排
$submenuContent.css("height", 0);
$submenu.removeClass("opened");
}
// 仅监听本次 transition，避免事件堆积
$submenuContent.off('transitionend').on('transitionend', function() {
if (typeof callback === 'function') {
callback($submenu);
}
});
}
// 点击处理：自动关闭其他菜单，展开当前项，并在展开完成后滚动定位
$(".submenu-title").on("click", function() {
const $submenuTitle = $(this);
const $submenu = $submenuTitle.closest(".submenu");
const $navbar = $('.navbar');
// 关闭所有其他已展开菜单
$submenu.siblings(".submenu.opened").each(function() {
toggleSubmenu($(this), false);
});
// 展开当前菜单，并在 transition 结束后滚动至其标题位置
toggleSubmenu($submenu, !$submenu.hasClass("opened"), function(openedSubmenu) {
if (openedSubmenu.hasClass("opened")) {
const targetTop = openedSubmenu.offset().top - $navbar.offset().top + $navbar.scrollTop();
$navbar.animate({ scrollTop: targetTop }, 325);
}
});
});
? 注意事项：
- 确保 .navbar 设置了 overflow-y: scroll 且未使用 overflow: hidden 或 overflow: auto（后者可能在某些浏览器中抑制 scrollTop 行为）；
- 若导航栏存在 transform 或 position: sticky 等影响 offset 计算的样式，需改用 getBoundingClientRect() 替代 offset()；
- 在高频率点击场景下（如连续快速切换），可增加节流逻辑防止 animate() 队列堆积；
- 现代项目推荐迁移到 CSS @starting-style + transition-behavior: allow-discrete（Chrome 119+）或使用 max-height + overflow: hidden 替代 height 过渡，以规避 reflow 开销。
该方案在保持原有动画流畅性的前提下，彻底解决了切换过程中的视觉错位问题，使用户始终聚焦于最新操作目标，显著提升导航体验的专业性与一致性。
