如何更简洁地编写全屏菜单交互的jQuery代码？

你现有代码的冗余点主要是为三个启动按钮分别绑定了重复的显隐逻辑，我们可以利用按钮ID和内容区块ID的命名对应关系做通用匹配，全程不需要修改现有HTML结构，不影响样式适配。

优化后完整代码 #

// 绑定所有菜单触发按钮的展开/折叠逻辑
$("#codes-launch, #gfx-launch, #tuts-launch, #menu-close").click(function() {
  $("#menu").slideToggle("slow");
  $("body").toggleClass("scroll-lock");

  // 仅点击内容启动按钮时执行区块切换，关闭按钮不触发内容改动
  if (this.id !== "menu-close") {
    // 从按钮ID提取对应内容区块的ID：xxx-launch 对应 xxx
    const targetPanel = this.id.replace("-launch", "");
    // 隐藏所有内容区块，仅显示目标区块
    $("#links > div").hide();
    $(`#${targetPanel}`).show();
  }
});

优化说明 #

• 逻辑和原有效果完全一致：点击对应分类按钮打开菜单时自动切换到对应内容，点击关闭按钮仅收起菜单、不改动当前显示的内容区块
• 消除了所有重复的事件绑定和显隐代码，整体代码量减少60%以上
• 扩展性更强：后续如果要新增分类，只需要按xxx-launch的ID格式加按钮、按xxx的ID加对应内容区块即可，不需要修改任何JS代码
• 完全保留原有HTML结构，不需要调整标签、类名，不会影响你已经写好的样式适配
• 如果需要菜单每次打开都默认显示某一个区块（比如Codes），只需要在展开分支里加对应显隐逻辑即可，当前逻辑和你原有代码保持一致，关闭菜单时不会重置内容显示状态

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