Jquery change class on click menu

Question

I am trying to change the class of a menu item so that it appears on click. I have got it to work, the only thing it does not revert back when you click it again. I am not sure how to remove the class on click.

All help is much appreciated.

   <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
  .menu ul li ul li {display:none}
  .menu .on ul li{display:block}
  .menu .on ul li ul{display:none}
  .menu .on ul li:hover ul{display:block}
  </style>
</head>
<body>
<div class="menu">
<ul>
  <li><a href="#">Toggle</a>
  <ul>
  <li>See</li></ul></li>
  <li><a href="#">Toggle</a>
  <ul>
  <li><a href="#">See</a>
  <ul><li><a href="#">See 2</a></li></ul></li></ul></li>
  </ul>
  </div>


<script>
$('li a').click(function() {
  $(this).parent().addClass('on').siblings().removeClass('on');
});

</script>

</body>
</html>

your HTML is incorrect (you have a <ul> without closing a <li>). You should correct it if you want your js to work — JMax
– JMax, Commented Sep 12, 2011 at 14:24

m.edmondson · Accepted Answer · 2011-09-12 14:20:41Z

3

You need toggleClass()

answered Sep 12, 2011 at 14:20

m.edmondson

30.9k29 gold badges129 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

Hi toggleClass worked $('li a').click(function() { $(this).parent().toggleClass('on').siblings().removeClass('on'); });

FishBasketGordo · Accepted Answer · 2011-09-12 14:31:43Z

0

Use toggleClass^{[API Ref]} to switch the one you clicked on/off and its siblings off/on, respectively:

$('li a').click(function() {
    var parent = $(this).parent();
        siblings = parent.siblings(),
        isOn = parent.toggleClass('on').hasClass('on');

    siblings.toggleClass('on', !isOn);
});

answered Sep 12, 2011 at 14:31

FishBasketGordo

23.2k4 gold badges60 silver badges92 bronze badges

Collectives™ on Stack Overflow

Jquery change class on click menu

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related