removeclass doesnt work

问题

i have a very simple question, actually this is not the question, this is fixing the javascript mistake, anyway, here is the code:

    $(document).ready(function() {
        $('#accordion a.item').click(function () {
            $(this).addClass('selected');
            $(this).removeClass('selected');
            $('#accordion li').children('ul').slideUp('slow'); 
            $(this).siblings('ul').slideDown('slow');  
        });
    });

and the html:

<ul id="accordion">
    <li>
        <a href="#" class="item">BANKS</a>
        <ul>BLA BLA BLA</ul>
    </li>
    <li>
        <a href="#" class="item">PETROL</a>
        <ul>BLA BLA BLA</ul>
    </li>
</ul>

when i click one of the link, the 'selected' class is added to it, but when i click the other link, the class 'selected' is not removing, what can be the mistake there?

thank you all for helping! i really appreciate it!

回答1:

It's not clear what you are trying to do, but it looks like you want to add the class to the clicked element and remove it from the all its siblings. Your current code adds and removes the class to the same element, which ends up not doing anything.

You probably want something like

$(document).ready(function() {
    $items = $('#accordion a.item'); // all the items
    $items.click(function () {
        $items.removeClass('selected'); // remove class from everything
        $(this).addClass('selected'); // add class to clicked item
        $('#accordion li').children('ul').slideUp('slow'); 
        $(this).siblings('ul').slideDown('slow');  
    });
});

回答2:

$(this) is the link you clicked, not all the link. You need to remove the class of all link.

$(document).ready(function() {
        $('#accordion a.item').click(function () {
            $('#accordion a.item').removeClass('selected');
            $(this).addClass('selected');
            $('#accordion li').children('ul').slideUp('slow'); 
            $(this).siblings('ul').slideDown('slow');  
        });
    });

回答3:

Make use of ToggeleClass rahter then adClass/ removeClass methos.

$("Selector").toggleClass('name of class',true); //apply class
$("Selector").toggleClass('name of class',false); //remove class

回答4:

These following lines in your functions are adding and removing class selected to the same element.

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

since you are adding and removing class on the element referred to by this which is the current element( the one that was just clicked). What these will do is add the class selected to the clicked element and immediately remove it.

What you need to do is

1- first remove the class selected from any elements that have it

2- add the class selected to the current element referred by this

one way to do it is

$('#accordion a.selected').removeClass('selected');
$(this).addClass('selected');

hope that helps.

来源：https://stackoverflow.com/questions/9990514/removeclass-doesnt-work

标签

javascript

jquery

removeclass