JQuery add/remove class onClick

Question

Open submenu on click, close on next click - that's what i would like to achive. example is this page (submenu under 'follow' link).
it opens submenu (adds class 'open'), but not closing. stucked... :(

my html:

<ul id="toggle"><li>
<a href="#">Menu</a>
<ul id="dropdown" class="dropdown-menu" role="menu">
<li><a href="#">2017</a></li>
<li><a href="#">2012</a></li>
<li><a href="#">2003</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>

javascript:

$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).removeClass('open').addClass('open');
});
});

http://jsfiddle.net/Gallex/32pv6xz8/7/

7 answers so far, all suggest toggleClass, anybody left?

Ram
– Ram

2015-04-01 13:05:14 +00:00
Commented Apr 1, 2015 at 13:05 — Ram
– Ram, Commented Apr 1, 2015 at 13:05
possible duplicate of jQuery toggle class

Riz
– Riz

2015-04-01 13:16:39 +00:00
Commented Apr 1, 2015 at 13:16 — Riz
– Riz, Commented Apr 1, 2015 at 13:16
@Vohuman not all ;-), at least not only

empiric
– empiric

2015-04-01 13:20:36 +00:00
Commented Apr 1, 2015 at 13:20 — empiric
– empiric, Commented Apr 1, 2015 at 13:20

empiric · Accepted Answer · 2015-04-02 10:10:07Z

11

You can use the function toggleClass() for this:

$('#toggle li').on('click', function () {
    $(this).toggleClass('open')
});

Demo

Here is a slightly different approach:

jQuery

$('#toggle li').on('click', function () {
     $(this).find('ul').slideToggle();
 });

CSS

#toggle li ul {
    list-style-type: none;
    left:0;
    position:absolute;
    display: none;
}

Demo 2

For preventing the redirect you have to use .preventDefault():

 $('#toggle li:has(#dropdown)').on('click', function (event) {
    if ($(event.target).parents('#dropdown').length > 0) {
        event.stopPropagation();
    } else {
        event.preventDefault();
    }
    $(this).find('ul').slideToggle();
});

I`m not sure if this is the cleanest or best approach, but it is working.

If you want to save the url for further use (e.g. redirectuing via window.location) you can assign the href-attribute to a variable:

var href = $(this).find('a').attr('href');

Demo 3

Reference

.toggleClass()

.slideToggle()

edited Apr 2, 2015 at 10:10

answered Apr 1, 2015 at 13:00

empiric

7,8767 gold badges40 silver badges51 bronze badges

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

8 Comments

Gallex Over a year ago

i like very much this 'different approach' to my question. i will use it.

Gallex Over a year ago

but, i would like to 'develope it further'. in my handwritten html code anchor tag doesn't have an url, but usually it does: '... <li> <a href="myhomepage.com/somecategory">Menu</a> <ul id="dropdown" class="dropdown-menu" role="menu"> ...' so, my question is: on click, how to 'force' to open a submenu not go to that url if anchor has an url?

empiric Over a year ago

@Gallex if one of the answers had helped you, feel free to accept any

Gallex Over a year ago

a bit rushed, not brilliant yet. now all anchors not redirecting, but i need only this anchor which has submenu [link]jsfiddle.net/Gallex/0akdz4ow anchors in submenu, also need to redirect

Gallex Over a year ago

yes, submenu anchors now working, but main menu do not jsfiddle.net/Gallex/0akdz4ow/4

|

Pramod Karandikar · Accepted Answer · 2015-04-01 13:00:16Z

2

Use toggleClass instead.

$(document).ready(function(){
  $('#toggle li').on('click', function(){
  $(this).toggleClass('open');
});
});

answered Apr 1, 2015 at 13:00

Pramod Karandikar

5,3377 gold badges45 silver badges75 bronze badges

Comments

Marc · Accepted Answer · 2015-04-01 13:06:25Z

2

What you are looking for is the .toggleClass() function:

$(document).ready(function(){
    $('#toggle li').on('click', function(){
        $(this).toggleClass('open')('open');
    });
});

Check out the corrected jsfiddle :)

What you did wrong was, that you chained the add and remove functions:

$(this).removeClass('open').addClass('open');

What this will do is removing the class 'open' and (when this is finsihed) add the class 'open' again. This caused, that the class would not dissapear.

edited Apr 1, 2015 at 13:06

answered Apr 1, 2015 at 13:00

Marc

3,7198 gold badges37 silver badges49 bronze badges

Comments

tech-gayan · Accepted Answer · 2015-04-01 13:08:41Z

2

$(document).ready(function(){
  $('#toggle li').on('click', function(){
     $(this).toggleClass('open');
  });
});

use the toggleClass() function.

Demo

edited Apr 1, 2015 at 13:08

answered Apr 1, 2015 at 13:03

tech-gayan

1,4431 gold badge11 silver badges25 bronze badges

Comments

I'm Geeker · Accepted Answer · 2015-04-01 13:19:24Z

2

Use toggleClass() function in jquery

$('#toggle li').on('click', function () {
    $(this).toggleClass('open')
});

Demo Here

edited Apr 1, 2015 at 13:19

answered Apr 1, 2015 at 13:03

I'm Geeker

4,6575 gold badges25 silver badges42 bronze badges

Comments

Ben P · Accepted Answer · 2015-04-01 13:01:05Z

1

it's because you are removing the class then adding it...so it will ALWAYS be added

$(this).removeClass('open');

to close it .

Use this instead

$(document).ready(function(){
$('#toggle li').on('click', function(){
$(this).toggleClass('open');
});
});

answered Apr 1, 2015 at 13:01

Ben P

236 bronze badges

Comments

enb081 · Accepted Answer · 2015-04-01 13:03:39Z

1

Just do the following:

$(document).ready(function(){
    $('#toggle li').on('click', function(){
         $(this).toggleClass('open');
    });
});

jsfiddle

answered Apr 1, 2015 at 13:03

enb081

4,09912 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

JQuery add/remove class onClick

7 Answers 7

8 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

8 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related