點擊僅適用於第一項

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');