CODEWITHSUNDEEP
jquery
Pete
Pete

Reputation: 532

Click only applying to the first item

So I have a little menu split into 4 sections "Burgers, Packs, Kids, Sides". It's simple enough, when a user clicks on one of them, the relevant section appears.

I wrote this little bit of jQuery to accomplish this:

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

Works nice enough. When I check the console after clicking on all the list items, the correct class name displays.

However, the class name menu-active is only being applied to the first one - "Burgers" - once Burgers is clicked. If I click on any of the other items, the class won't be applied.

Any thoughts? Much appreciated.

EDIT:

Sorry, I should have been more clear. The HTML structure is:

<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>

So when a li item is clicked, the next div is found with the matching class (e.g. "Burgers") and then a class of "menu-active" is applied to that div.

Upvotes: 0

Views: 65

Answers (2)

Alex Art.
Alex Art.

Reputation: 8781

This should work:

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

Upvotes: 1

user3705773
user3705773

Reputation: 97

You can change:

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

to:

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

Upvotes: 1

Related Questions