Javascript Post循环中的多个切换

我创建了一个简单的切换来显示和关闭食物菜单。然而，由于这是在Wordpress循环中，只有第一个循环有效

我猜是因为随着页面的构建，它会变成多个ID。但是我找不到任何方法来调整JQuery/JS以不使用ID

有什么想法吗

<a id="menu-toggle" class="menu-button">Menu</a>
<div class="menu-toggle-container">
    <div id="food-menu">
        <div>
            <h3><?php echo $summer_menu_item_one; ?></h3>
            <h4><?php echo $summer_menu_price_one; ?></h4>
        </div>
        <div>
            <h3><?php echo $summer_menu_item_two; ?></h3>
            <h4><?php echo $summer_menu_price_two; ?></h4>
        </div>
        <div>
            <h3><?php echo $summer_menu_item_three; ?></h3>
            <h4><?php echo $summer_menu_price_three; ?></h4>
        </div>
        <div>
            <h3><?php echo $summer_menu_item_four; ?></h3>
            <h4><?php echo $summer_menu_price_four; ?></h4>
        </div>
        <div>
            <h3><?php echo $summer_menu_item_five; ?></h3>
            <h4><?php echo $summer_menu_price_five; ?></h4>
        </div>
    </div>
</div>


$(function () {
        var foodMenu = document.getElementById('food-menu');
        var foodMenuName = document.getElementById('menu-toggle');
        $('#menu-toggle').click(function () {
            foodMenu.classList.toggle('active');
            foodMenuName.classList.toggle('active');
        });
});

菜单
$（函数（）{
var foodmenus=document.getElementById（'food-menu'）；
var foodMenuName=document.getElementById（'menu-toggle'）；
$（“#菜单切换”）。单击（函数（）{
foodmens.classList.toggle（'active'）；
foodMenuName.classList.toggle（'active'）；
});
});

---

foodMenuName只是将“打开菜单”文本切换为“关闭菜单”

考虑以下事项

$(function () {
    $('.menu-button').click(function(e) {
        var menuToggle = $(this).next(".menu-toggle-container");
        $("div", menuToggle).toggleClass("active");
    });
});

---

这利用了类和元素的相对位置。这将在单击后将

活动的
类添加和删除到食物菜单中。
HTML中的所有ID必须是唯一的。我怀疑如果有多个实例，您没有正确的选择器或ID。您能否澄清“只有第一个有效”是什么意思？当post循环在页面上多次打印时，多个ID正在停止下拉列表的工作。Twisty（下图）的回答很有效，解决了这个问题。我一整天都在努力解决这个问题，这个解决方案完全解决了我的问题。太感谢你了！！