本文提供一种平滑解决方案：在关闭前一个子菜单的同时展开新子菜单，并在过渡结束后自动滚动至新展开菜单的标题位置，确保其始终可见（紧贴导航栏顶部），避免页面意外跳动。
本文提供一种平滑解决方案：在关闭前一个子菜单的同时展开新子菜单，并在过渡结束后自动滚动至新展开菜单的标题位置，确保其始终可见（紧贴导航栏顶部），避免页面意外跳动。
在实现带 height 过渡效果的多级导航栏时，常见需求是「单开模式」——即同一时间仅允许一个子菜单展开。但若直接并发执行「关闭旧菜单 + 展开新菜单」两个高度过渡动画，浏览器会因 DOM 布局重排与滚动位置计算冲突，导致视口意外下移，使用户刚点击的新菜单（尤其是位于下方的菜单）被推至可视区域之外，严重影响体验。
根本原因在于：当两个 .submenu-content 同时触发 height 过渡时，父容器 .navbar 的总高度瞬时剧烈变化，触发浏览器自动调整 scrollTop 以维持当前锚点（通常是上一个展开项的顶部），而非新目标项。单纯等待过渡结束再滚动（如 setTimeout）会造成明显卡顿；而串行执行（先关后开）又违背“即时响应”的交互直觉。
✅ 推荐解法：基于 transitionend 的精准滚动时机控制
核心思路是：仅在新子菜单的 height 过渡完全完成时，立即执行平滑滚动，将该菜单标题对齐到 .navbar 顶部。关键点在于：
- 为 toggleSubmenu 添加可选回调函数，在 transitionend 触发时调用；
- 回调中计算新展开菜单相对于 .navbar 容器的局部偏移（$submenu.offset().top - $navbar.offset().top + $navbar.scrollTop()）；
- 使用 animate({ scrollTop: targetOffset }, 325) 实现与 CSS 过渡时长一致的同步滚动动画，视觉连贯无割裂。
以下是优化后的核心逻辑（jQuery 实现）：
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 {
// 收起：先强制 height=scrollHeight（触发布局），再设为 0
$submenuContent.css("height", $submenuContent.get(0).scrollHeight);
$submenuContent.get(0).offsetHeight; // 强制重排
$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);
});
// 展开当前菜单，并在过渡完成后滚动定位
toggleSubmenu($submenu, !$submenu.hasClass("opened"), function(openedSubmenu) {
if (openedSubmenu.hasClass("opened")) {
const offsetTop = openedSubmenu.offset().top - $navbar.offset().top + $navbar.scrollTop();
$navbar.animate({ scrollTop: offsetTop }, 325);
}
});
});
⚠️ 注意事项与增强建议：
- 防重复绑定：使用 .off('transitionend').on(...) 确保每次调用只监听一次，避免事件堆积；
- 滚动精度：offset().top 获取的是相对于文档的绝对位置，需减去 .navbar 自身的 offset().top 并加上当前 scrollTop，才能得到容器内相对偏移；
- 性能优化：若菜单层级极深或数量极大，可考虑 requestAnimationFrame 替代 animate()，或使用 scrollIntoView({ block: 'start', behavior: 'smooth' })（需注意兼容性）；
- 无障碍支持：为 .submenu-title 添加 aria-expanded 属性，并在切换时同步更新，提升屏幕阅读器体验。
该方案在保持并发过渡动画流畅性的同时，通过精准的时机控制与计算，确保用户操作焦点始终锚定在最新交互目标上，真正实现「所点即所见」的沉浸式导航体验。
