移动端菜单子项点击可展开但无法实现滑下动画效果求助

问题根源 #

你原来的代码里用了display: none和display: block切换子菜单显示状态，而display属性的变化是即时生效的，会直接打断CSS过渡动画，所以看不到滑下效果。

方案一：纯CSS修复（最简单） #

移除display相关设置，改用overflow: hidden配合max-height实现过渡：

.menu-item-has-children {
  position: relative;
}

.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* 可添加你需要的其他样式，比如padding、背景色等 */
}

.sub-menu.open {
  max-height: 999px; /* 设置一个足够大的值，确保覆盖所有子菜单的实际高度 */
}

这样修改后，子菜单会通过max-height的渐变实现滑下/收起的动画效果，overflow: hidden用来隐藏max-height为0时的内容。

方案二：JS精确控制（适合高度不确定的场景） #

如果子菜单的高度不固定，想要更精准的动画，可以通过JS获取子菜单的真实高度后再设置过渡：

假设你的HTML结构如下：

<li class="menu-item-has-children">
  <a href="#">父菜单</a>
  <ul class="sub-menu">
    <li>子菜单1</li>
    <li>子菜单2</li>
  </ul>
</li>

对应的JS代码：

// 获取所有包含子菜单的菜单项
const parentMenuItems = document.querySelectorAll('.menu-item-has-children');

parentMenuItems.forEach(item => {
  const subMenu = item.querySelector('.sub-menu');
  // 提前获取子菜单的真实内容高度
  const actualHeight = subMenu.scrollHeight;
  
  // 初始化子菜单样式
  subMenu.style.maxHeight = '0';
  subMenu.style.overflow = 'hidden';
  subMenu.style.transition = 'max-height 0.3s ease';

  // 绑定点击事件
  item.addEventListener('click', () => {
    item.classList.toggle('open');
    // 根据open类切换高度
    subMenu.style.maxHeight = item.classList.contains('open') ? `${actualHeight}px` : '0';
  });
});

这里用scrollHeight获取子菜单的真实内容高度，确保动画时的高度完全匹配子菜单大小，避免出现多余的空白或内容截断。

内容的提问来源于stack exchange，提问作者Robert