Question

所以我有一个小菜单分为4个部分“Burgers，Packs，Kids，Sides”。这很简单，当用户点击其中一个时，会出现相关部分。

我写了一点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” - 一旦点击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项时，会找到匹配类的下一个div（例如“Burgers”），然后将一个“menu-active”类应用于该div。

Answer 1

这应该有效：

$(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");
  });
});

Answer 2

您可以更改：

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

为：

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

单击仅应用于第一个项目

2 个答案: