Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery toggleClass not working?

Very simply put : the line currentItem.toggleClass('open'); doesn't seem to work.

More precisely, when inspecting the results with firebug, I can see the class "open" flashing (appearing and immediately disappearing) on the relevant element. So it's like the function is actually triggered twice (of course I only click once).

Can somebody explain me why this is and how to prevent it?

Here is my jQuery code :

$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {

    var currentTree = $(this).parent().parent().parent();
    var currentItem = $(this).parent().parent();
    var currentGroup = currentItem.attr('rel');

    $(this).parents('ul').children('li').removeClass('select');
    if ($(this).is(':checked')) {
        currentItem.addClass('select');
    }

    currentItem.toggleClass('open');

    var currentLevel = 0;
    if (currentItem.is('.level1')) {currentLevel = 1;}
    if (currentItem.is('.level2')) {currentLevel = 2;}
    if (currentItem.is('.level3')) {currentLevel = 3;}
    var nextLevel = currentLevel + 1;

    currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});

And here is a part of my HTML code, slightly simplified for better readability (not very pretty I know, but I only have a limited control on the HTML output) :

<div class="col_left collapse">
    <ul class="radio_list" rel="7">
        <li class="onglet level0" rel="group1">
            <span class="onglet level0">
                <input type="radio" />
                    <label>Services Pratiques</label></span>
            <input type="hidden" value="1">
        </li>

Thanks in advance.

like image 837
s427 Avatar asked Nov 02 '10 11:11

s427


People also ask

What does toggleClass do in jQuery?

The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.

What is the difference between toggle and toggleClass in jQuery?

The toggle method makes an element visible or hidden, whichever is the opposite of what it is already. It's like using hide or show but you don't need to know which one to pick, it performs like the one that will make a difference. The toggleClass method does something similar to an element's class.

Is jQuery a class?

jQuery hasClass() MethodThe hasClass() method checks if any of the selected elements have a specified class name. If ANY of the selected elements has the specified class name, this method will return "true".


2 Answers

Problem solved: the JS file was actually included twice in the HTML head, which caused the function to be triggered twice with each click.

like image 195
s427 Avatar answered Sep 20 '22 13:09

s427


I had a similar problem on my site, and I found that I had accidently duplicated the toggleclass hook all the way at the bottom, when first messing around with it. Oops! Make sure to look for double calls!

like image 23
Sasha Avatar answered Sep 22 '22 13:09

Sasha