Jquery 单击“仅应用于第一项”

所以我有一个小菜单，分为4个部分：“汉堡，包，孩子们，配菜”。这很简单，当用户单击其中一个按钮时，相关部分就会出现

我写了一点jQuery来实现这一点：

$(document).ready(function() {
  var menu = $(".menus");
  var menuItem = $('.menu-nav ul > li');

  menuItem.on("click", function () {
  var menuClass = $(this).attr('class');
  console.log(menuClass);
  menu.next('.' + menuClass).toggleClass("menu-active");
  });
});

很好用。单击所有列表项后检查控制台时，将显示正确的类名

但是，单击Burgers后，类名菜单active仅应用于第一个“Burgers”（汉堡）。如果我单击任何其他项，则不会应用该类

有什么想法吗？非常感谢

编辑：

对不起，我应该说得更清楚些。HTML结构是：

<div class="menus">
<nav class="menu-nav">
    <ul>
        <li class="Burgers">Burgers</li>
        <li class="Packs">Packs</li>
        <li class="Kids">Kids</li>
        <li class="Sides">Sides</li>
   </ul>
</nav>
<div class="menu-group Burgers">
    <div class="menu">
        Stuff here.
    </div>
</div>
<div class="menu-group Packs">
    <div class="menu">
        Stuff here.
    </div>
</div>
</div>

汉堡
包装
孩子们
侧面

这里有东西。
这里有东西。

因此，当单击某个li项目时，会找到下一个具有匹配类（例如“Burgers”）的div，然后将“菜单活动”类应用于该div。

这应该可以：

$(document).ready(function() {
  var menu = $(".menus");
  var menuItem = $('.menu-nav ul > li');

  menuItem.on("click", function () {
  var menuClass = $(this).attr('class');
  console.log(menuClass);
  $("div.menu-group").removeClass("menu-active");
  $("div."+menuClass).first().addClass("menu-active");
  });
});

您可以更改：

menu.next('.' + menuClass).toggleClass("menu-active");

致：

---

我实际上是想用同一个类切换下一个div，而不是li项本身。抱歉，应该已经指定。显示您的菜单html结构

$(this).addClass('menu-active').siblings('li').removeClass('menu-active');