点击仅适用于第一项

Question

所以我有一个小菜单分成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"); 
    }); 
}); 

作品不够好。点击所有列表项后，当我检查控制台时，显示正确的类名称。

但是，类名菜单激活只适用于第一个 - “汉堡” - 一旦汉堡被点击。如果我点击其他任何项目，该课程将不会被应用。

有什么想法？非常感激。

编辑：

对不起，我应该更清楚。 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> 

所以被点击一个里的项目时，下一个DIV与匹配类中找到（例如，“汉堡”），然后类的“菜单活性”被施加到该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');