WordPress文章循环中多美食菜单切换按钮仅首个生效的解决方法咨询

你猜的完全没错——重复的ID属性就是问题根源！HTML规范里明确要求ID必须是页面唯一的，当WordPress循环生成多个相同ID的元素时，getElementById或者$('#menu-toggle')这类选择器只会匹配到第一个元素，后面的按钮自然就失去了绑定的事件。

下面给你两个直接可行的修改思路，核心都是用类代替ID，通过DOM关系精准定位对应菜单：

方案1：利用相邻DOM关系（最适配当前结构） #

既然每个按钮和它对应的菜单是紧挨着的结构，我们可以通过当前点击的按钮，直接找到它旁边的菜单容器，完全不用依赖任何唯一标识。

修改后的HTML #

把所有ID替换成类，保留原有结构：

<a class="menu-toggle menu-button">Menu</a>
<div class="menu-toggle-container">
  <div class="food-menu">
    <div>
      <h3><?php echo $summer_menu_item_one; ?></h3>
      <h4><?php echo $summer_menu_price_one; ?></h4>
    </div>
    <!-- 其他菜单项保持不变 -->
  </div>
</div>

修改后的JavaScript #

用$(this)获取当前点击的按钮，再通过.next()和.find()链式调用找到对应的菜单：

$(function () {
  // 给所有带menu-toggle类的按钮绑定点击事件
  $('.menu-toggle').click(function () {
    const $toggleBtn = $(this);
    // 找到当前按钮对应的美食菜单：先找相邻的容器，再定位内部的菜单
    const $foodMenu = $toggleBtn.next('.menu-toggle-container').find('.food-menu');
    
    // 切换菜单的active状态
    $foodMenu.toggleClass('active');
    // 切换按钮的样式和文本
    $toggleBtn.toggleClass('active');
    $toggleBtn.text($toggleBtn.hasClass('active') ? 'Close Menu' : 'Menu');
  });
});

方案2：自定义数据属性（更灵活的扩展性） #

如果未来你的DOM结构可能变动，相邻关系不再成立，可以给按钮加一个data-target属性，绑定对应菜单的唯一标识（比如用WordPress的文章ID）。

修改后的HTML #

给按钮加data-target，菜单用动态生成的唯一类：

<a class="menu-toggle menu-button" data-target="food-menu-<?php the_ID(); ?>">Menu</a>
<div class="menu-toggle-container">
  <div class="food-menu food-menu-<?php the_ID(); ?>">
    <!-- 菜单项保持不变 -->
  </div>
</div>

修改后的JavaScript #

通过data-target的值精准找到对应菜单：

$(function () {
  $('.menu-toggle').click(function () {
    const $toggleBtn = $(this);
    const targetMenuClass = $toggleBtn.data('target');
    const $foodMenu = $(`.${targetMenuClass}`);
    
    $foodMenu.toggleClass('active');
    $toggleBtn.toggleClass('active');
    $toggleBtn.text($toggleBtn.hasClass('active') ? 'Close Menu' : 'Menu');
  });
});

方案为什么有效？ #

1. 类可以在页面中重复使用，不会像ID那样导致选择器失效
2. 每个按钮都能独立定位到自己对应的菜单，循环生成多少个都不会互相干扰
3. 完全避开了依赖唯一ID的逻辑，完美适配WordPress循环的重复渲染场景

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