点击菜单切换子菜单：如何移除其他元素的show类并添加到目标元素

你的问题出在每次点击只给对应子菜单添加show类，但没移除其他子菜单的show类，导致多个子菜单同时显示重叠。只需要在添加新的show类前，先移除所有子菜单的该类即可：

修改后的代码：

$( ".main-menu-link-container" ).click(function() {
  var index = $( ".main-menu-link-container" ).index( this );
  // 先移除所有子菜单的show类
  $( ".subcategory-menu-links-wrapper" ).removeClass("show");
  // 再给目标子菜单添加show类
  $( ".subcategory-menu-links-wrapper" ).eq(index).addClass("show");
});

如果需要支持点击同一链接切换子菜单显示/隐藏，可以再加个判断：

$( ".main-menu-link-container" ).click(function() {
  var index = $( ".main-menu-link-container" ).index( this );
  var targetMenu = $( ".subcategory-menu-links-wrapper" ).eq(index);
  
  // 如果目标菜单已经显示，就隐藏；否则先隐藏所有再显示目标
  if (targetMenu.hasClass("show")) {
    targetMenu.removeClass("show");
  } else {
    $( ".subcategory-menu-links-wrapper" ).removeClass("show");
    targetMenu.addClass("show");
  }
});

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