CODEWITHSUNDEEP
jquery
Gallex
Gallex

Reputation: 321

JQuery add/remove class onClick

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/

Upvotes: 4

Views: 79095

Answers (7)

empiric
empiric

Reputation: 7878

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

Upvotes: 11

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

Use toggleClass() function in jquery 

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

Demo Here

Upvotes: 2

tech-gayan
tech-gayan

Reputation: 1423

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

use the toggleClass() function.

Demo

Upvotes: 2

Marc
Marc

Reputation: 3709

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.

Upvotes: 2

enb081
enb081

Reputation: 4061

Just do the following:

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

jsfiddle

Upvotes: 1

Ben P
Ben P

Reputation: 23

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

Upvotes: 1

Pramod Karandikar
Pramod Karandikar

Reputation: 5329

Use toggleClass instead.

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

Upvotes: 2

Related Questions