Flexbox响应式移动端菜单点击动画实现问题求助

嘿，我来帮你搞定这个菜单动画的问题！先梳理下你代码里的核心问题，再一步步修正实现平滑的展开/收起效果：

两个关键问题 #

1. ID重复导致事件绑定失效：你的HTML里nav和ul都用了id="test"，这违反了HTML规范——id必须是页面唯一的，会让jQuery的事件绑定逻辑混乱，点击操作可能根本没触发预期行为。
2. display属性不支持CSS过渡：CSS的transition无法识别display:none到display:flex的状态切换，因为display:none会让元素完全脱离文档流，浏览器没法计算中间过渡状态，自然出不来动画。

修改后的完整代码 #

HTML（修复ID重复问题）

<nav class="flex-nav" id="flexNav">
  <a href="#" class="toggle-nav"> &#9776;Menu</a>
  <ul id="menu">
    <li class="item1"><a href="#" >Item1</a></li>
    <li class="item2"><a href="#" >Item2</a></li>
    <li class="social"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="social"><a href="#"><i class="fa fa-twitter"></i></a></li>
  </ul>
</nav>

CSS（用max-height实现平滑展开动画）

.flex-nav ul{
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* 移动端默认垂直排列菜单 */
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.flex-nav ul.open{
  max-height: 500px; /* 设一个足够容纳菜单内容的高度值 */
}

jQuery（修正事件绑定目标）

$(function(){
  $('.toggle-nav').on('click', function(e){
    e.preventDefault(); // 阻止锚点的默认跳转行为
    $('#menu').toggleClass('open');
  });
});

为什么这样能生效？ #

• 我们把display:none换成了max-height:0 + overflow:hidden，这样元素依然留在文档流中，但高度为0不可见；
• 当添加open类时，max-height被设为足够大的值，浏览器可以计算高度从0到目标值的过渡过程，自然就有了平滑的展开动画；
• 同时修正了ID重复的问题，确保点击菜单按钮时能精准触发切换逻辑。

如果你偏好淡入淡出的动画效果，也可以用opacity+visibility的组合：

.flex-nav ul{
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.flex-nav ul.open{
  opacity: 1;
  visibility: visible;
}

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