jQuery响应式菜单：点击锚点链接后自动折叠的实现求助

嘿，这个问题挺常见的，我来帮你搞定！你的响应式导航在移动端点击锚点后没自动收起菜单，其实只需要给锚点链接加个点击事件，触发菜单折叠的逻辑就行。

核心解决方案 #

关键思路是：当用户点击移动端菜单里的锚点时，先检查菜单是否处于展开状态，如果是，就手动移除展开的类，让菜单收回去。

假设你的代码里是用active类控制菜单展开/折叠，修改你的jQuery代码如下：

// 保留原来的菜单切换逻辑
$('.menu-icon').click(function() {
  $('nav ul').toggleClass('active');
  $(this).toggleClass('active');
});

// 新增：点击锚点后关闭移动端菜单
$('nav ul li a').on('click', function() {
  // 只在菜单展开时执行关闭操作（适配移动端）
  if ($('nav ul').hasClass('active')) {
    $('nav ul').removeClass('active');
    $('.menu-icon').removeClass('active');
  }
});

为什么这能生效？ #

• 这段代码会监听所有导航锚点的点击事件
• 每次点击时先判断菜单是否处于展开状态（桌面端菜单默认展开，所以不会触发关闭）
• 如果是移动端的展开状态，就移除active类，让菜单折叠，同时把菜单图标也恢复成初始样式

额外体验优化（可选） #

如果你的锚点是跳转到页面内的位置，可以加上平滑滚动效果，让页面跳转更流畅：

$('nav ul li a').on('click', function(e) {
  // 阻止默认的锚点跳转行为
  e.preventDefault();
  
  // 获取目标锚点元素
  const targetAnchor = $(this.getAttribute('href'));
  
  // 如果目标元素存在，执行平滑滚动
  if (targetAnchor.length) {
    $('html, body').animate({
      scrollTop: targetAnchor.offset().top
    }, 500); // 500ms是滚动时长，可按需调整
  }
  
  // 关闭移动端菜单的逻辑
  if ($('nav ul').hasClass('active')) {
    $('nav ul').removeClass('active');
    $('.menu-icon').removeClass('active');
  }
});

这样既解决了菜单不折叠的问题，又提升了页面跳转的体验~

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