二级菜单侧滑需用transform: translateX()配合opacity实现，禁止display:none或visibility:hidden；结构上submenu必须为.dropdown-menu子元素且设position: absolute；激活时切换.is-open类触发动画，并手动绑定click事件。
二级菜单点击触发 transform 侧滑的 DOM 结构前提
直接用 transform: translateX() 实现侧滑，前提是二级菜单不能被 display: none 或 visibility: hidden 硬性隐藏——否则 CSS 过渡会失效或跳变。必须让元素始终在文档流中（哪怕透明、移出视口），靠 transform 和 opacity 控制显隐。
推荐结构：二级菜单作为 .dropdown-menu 的子容器（如 .submenu），默认用 transform: translateX(-100%) 移出左侧，同时设 opacity: 0 和 pointer-events: none；激活时改 transform: translateX(0) 和 opacity: 1，并恢复 pointer-events: auto。
- 不要把
.submenu放在.dropdown-menu外部，否则 Bootstrap 的dropdown插件事件监听会漏掉 - 确保父级
.dropdown-menu有position: relative，否则transform的定位基准会错乱 - 若用 Bootstrap 5，注意
data-bs-toggle="dropdown"默认只触发一级下拉，二级需手动绑定click事件
用 JavaScript 绑定点击并切换 transform 状态
Bootstrap 自带的下拉逻辑不支持二级菜单的独立 toggle，得自己写事件。关键不是“显示/隐藏”，而是“切换 is-open 类”，再由 CSS 控制 transform 动画。
示例逻辑（原生 JS，兼容 BS5）：
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('.dropdown-item.has-submenu').forEach(item => {
item.addEventListener('click', function(e) {
e.preventDefault();
const submenu = this.nextElementSibling;
if (!submenu || !submenu.classList.contains('submenu')) return;
<pre class="brush:php;toolbar:false;">// 关闭其他已开的二级菜单（可选）
document.querySelectorAll('.submenu.is-open').forEach(el => {
if (el !== submenu) el.classList.remove('is-open');
});
submenu.classList.toggle('is-open');}); });
- 用
has-submenu类标记有二级菜单的一级项，避免误触纯链接 - 不依赖
data-bs-toggle，防止和 Bootstrap 默认行为冲突 - 如果需要点击空白处关闭，监听
document的click并排除.submenu和触发按钮
CSS 中定义 transform 侧滑动画与过渡效果
动画是否顺滑，取决于 transform 和 opacity 是否都参与过渡，且不能有 layout 触发属性（如 height、margin）混入。
核心 CSS 片段：
.submenu {
position: absolute;
top: 0;
left: 100%;
width: 200px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
border-radius: 4px;
overflow: hidden;
opacity: 0;
transform: translateX(-100%);
transition: transform 0.25s ease, opacity 0.25s ease;
pointer-events: none;
}
<p>.submenu.is-open {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}</p><p>/<em> 可选：防止父 dropdown-menu 高度塌陷 </em>/
.dropdown-menu {
position: relative;
}- 务必给
.submenu设position: absolute，否则translateX会受父容器宽度影响偏移异常 - 过渡时间统一用
0.25s，太长显得迟滞，太短（如0.1s）人眼难感知 - 如果二级菜单内容高，记得加
max-height+overflow-y: auto，但不要对max-height做过渡——它不支持平滑动画
移动端点击穿透与层级 z-index 冲突
在 iOS Safari 或某些安卓 WebView 中，侧滑菜单可能被遮挡或点不中，常见原因是 z-index 层级没理清，或 -webkit-overflow-scrolling: touch 导致渲染异常。
-
.submenu的z-index至少要比.dropdown-menu高 1（如z-index: 1001），而.dropdown-menu默认是1000 - 如果页面启用了
transform: translateZ(0)或will-change: transform优化，要确保.submenu也在同一 stacking context 下，否则可能被裁剪 - 真机调试时发现点击无响应？检查是否被
fixed定位的 header 盖住，或父级overflow: hidden把侧滑部分裁掉了
侧滑动效看着简单，真正卡住人的往往是 DOM 结构错位、transition 属性漏写、或者移动端 stacking context 混乱——这些地方一旦出问题，动画要么不触发，要么闪一下就消失。
