基于W3的移动端响应式汉堡导航：如何实现点击平滑过渡并修复菜单点击失效问题

• 选择器逻辑完全错误：你写的$(this).next('.responsive') 中，this指向汉堡按钮.icon，它的兄弟节点里根本没有带.responsive类的元素，导致后续所有动画操作的目标是空值，完全没作用到导航组件上。
• HTML存在语法错误：汉堡按钮上写的onclick="function()" 是无效代码，会触发JS解析报错，干扰正常事件绑定。
• 缺失类名切换逻辑：原导航结构的移动端显示逻辑，依赖给.topnav容器添加.responsive类后才会展开隐藏的导航链接，你之前的JS完全没有执行类名的添加/移除操作，光对不存在的元素做滑动操作，自然无法响应点击。

不需要复杂的自定义逻辑，两种方案任选即可：

• 若已引入jQuery：直接用jQuery内置的slideUp()/slideDown()/slideToggle()方法即可实现平滑过渡，不需要额外写CSS动画，只要修正选择器逻辑，把动画作用范围限定在导航内容区（排除汉堡按钮本身，避免按钮被一并收起失效）。
• 若追求更轻量的实现：纯CSS也可完成过渡，不需要依赖JS动画。核心是给.topnav容器设置max-height属性配合transition过渡规则，切换类名时自动触发高度平滑变化即可。注意display: none/block 不支持CSS过渡，不能直接对该属性写动画规则。

调整后的JavaScript逻辑 #

$(document).ready(function(){
    // 汉堡按钮点击切换菜单状态
    $(".icon").click(function(e) {
      e.preventDefault();
      // 定位当前点击汉堡所属的.topnav容器
      const $topnav = $(this).closest('.topnav');
      // 切换响应式类名
      $topnav.toggleClass('responsive');
      // 仅对除汉堡按钮外的导航内容做滑动动画
      $topnav.children(':not(.icon)').slideToggle(300);
    });
    // 点击页面空白区域自动收起菜单
    $(document).click(function(e){
        const isNavClicked = $(e.target).closest('.topnav').length;
        if (!isNavClicked) {
            $(".topnav.responsive").removeClass('responsive');
            $(".topnav.responsive").children(':not(.icon)').slideUp(300);
        }
    });
});

需补充的CSS规则 #

/* 移动端适配的基础动画规则 */
@media screen and (max-width: 600px) {
  /* 排除汉堡按钮的导航内容默认隐藏 */
  .topnav a:not(.icon), .topnav .dropdown {
    display: none;
  }
  /* 展开状态下显示导航内容 */
  .topnav.responsive a:not(.icon), .topnav.responsive .dropdown {
    display: block;
  }

  /* 如需纯CSS过渡，直接取消下面代码的注释即可，无需依赖jQuery动画
  .topnav {
    max-height: 55px;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .topnav.responsive {
    max-height: 500px;
  }
  */
}

• 动画作用范围一定要排除汉堡按钮，否则菜单展开后汉堡按钮会被一并收起，后续无法触发收起操作。
• 移动端的下拉菜单不要绑定hover触发逻辑，需要改成点击触发，否则触屏设备无法正常展开下拉选项。
• 请删除HTML里汉堡按钮上无效的onclick="function()" 代码，避免语法报错干扰正常事件执行。

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