本文提供一种在同时关闭旧子菜单与展开新子菜单（均带 height 过渡动画）时，自动滚动定位至新菜单标题的解决方案，确保用户操作后新菜单始终可见，避免页面意外偏移。
本文提供一种在同时关闭旧子菜单与展开新子菜单（均带 height 过渡动画）时，自动滚动定位至新菜单标题的解决方案，确保用户操作后新菜单始终可见，避免页面意外偏移。
在具有垂直滚动区域的导航栏中实现多级子菜单时，若采用 height 过渡动画控制展开/收起，并要求「单次仅允许一个子菜单打开」，就会遇到典型的视觉干扰问题：当用户快速点击下方的子菜单项（如从 Submenu 1 切换到 Submenu 2）时，两个子菜单会同时触发 height 动画——上方菜单收缩、下方菜单展开。由于 DOM 高度动态变化导致父容器（.navbar）内容高度瞬时波动，浏览器自动调整滚动位置，常使新打开的子菜单标题被推至视口外，严重影响可用性。
根本原因在于：height 过渡期间，.navbar 的 scrollHeight 持续变化，而 scrollTop 并未同步校准；单纯等待过渡结束再滚动（如监听 transitionend 后调用 animate({ scrollTop: ... })）虽可行，但会造成明显卡顿，违背“平滑”体验预期。
✅ 推荐方案：精准锚定 + 过渡同步滚动
核心思路是：不在过渡结束后才滚动，而是在新子菜单完成 height 展开的瞬间，立即计算其标题相对于 .navbar 容器的精确偏移量，并以相同持续时间（325ms）执行平滑滚动，使滚动动画与 height 动画视觉同步。
关键实现步骤如下：
- 增强 toggleSubmenu 函数：支持传入回调函数，在 transitionend 触发时执行（注意：需为每个 .submenu-content 单独绑定，避免事件重复注册，故每次调用前先 off()）；
-
在回调中计算滚动目标：
- 获取新展开子菜单的 .submenu-title 在文档中的 offset().top；
- 减去 .navbar 自身的 offset().top，得到其相对于容器顶部的理论距离；
- 加上当前 .navbar.scrollTop，得出需滚动到的绝对像素值；
- 使用 animate() 同步滚动：指定与 height 过渡一致的 325ms 时长和 swing 缓动，保证视觉连贯性。
function toggleSubmenu($submenu, isOpen, callback) {
const $submenuContent = $submenu.find(".submenu-content");
if (isOpen) {
// 展开：设为 scrollHeight 并添加 opened 类
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenu.addClass("opened");
} else {
// 收起：先设为 scrollHeight 强制重排，再设为 0
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenuContent.get(0).offsetHeight; // 强制 reflow
$submenuContent.css("height", 0);
$submenu.removeClass("opened");
}
// 绑定一次 transitionend，防止重复监听
$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 titleTop = openedSubmenu.find('.submenu-title').offset().top;
const navbarTop = $navbar.offset().top;
const targetScroll = titleTop - navbarTop + $navbar.scrollTop();
$navbar.animate({ scrollTop: targetScroll }, 325);
}
});
});
⚠️ 注意事项：
- 必须使用 animate() 而非直接赋值 scrollTop，否则无法实现平滑过渡；
- offset().top 计算依赖元素已渲染且无 display: none，因此确保 .submenu 始终为 block 或 flex；
- 若子菜单内容动态加载，需在内容渲染完成后再次调用 toggleSubmenu 或手动触发 height 重置；
- 在移动端需额外测试 animate() 兼容性，可降级为 scrollIntoView({ behavior: 'smooth', block: 'start' })（但需注意 scrollIntoView 对父容器 overflow 的兼容性限制）。
该方案在保持原有动画逻辑的前提下，通过「动画同步滚动」实现了零感知的视觉衔接，既满足单菜单互斥需求，又保障了用户焦点始终锚定在操作目标上，是兼顾性能与体验的生产就绪解法。
