JQuery addClass() on Click Event

Question

I am attempting to build a Jquery/CSS drop down menu and things have been going pretty good so far. I'm pretty new to JQuery and I get it most of the time - however, I cannot figure out what I am doing wrong here.

I am attempting to change the class of one of the drop-down tabs when it is clicked, but it doesn't appear to be working as expected.

You can see the code I have so far over here: http://jsfiddle.net/utdream/NZJXq/

I have the class "selected" looking how I want the button to look when a button is clicked on, but I cannot seem to make it so the "selected" class is applied on a click event. In theory, this:

<li id="menuProducts"><a href="#" class="hasmore">Products</a>
    <div id="ProductsMenu">
        <ul>
            <li><a href="#">Submenu Item</a></li>
            <li><a href="#">Submenu Item</a></li>
        </ul>
    </div>
</li>

Should change this this on a click event:

<li id="menuProducts"><a href="#" class="selected">Products</a>
    <div id="ProductsMenu">
        <ul>
            <li><a href="#">Submenu Item</a></li>
            <li><a href="#">Submenu Item</a></li>
        </ul>
    </div>
</li>

And this is my current jQuery (which doesn't work):

jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
    function () {
        $("a:first").removeClass("hasmore");
        $("a:first").addClass("selected");
        menuSubCloseAll.call(this, 'menuProducts');
        $('#menuProducts').find('li').slideToggle(200);
    });
});

I've tried rewriting this code in many,many different ways and I'm running out of ideas on what I could be doing wrong.

Anyone out there have any pointers on what I could do to fix this?

Thank you in advance!!

a comment is faster than an answer and safer ;) welcome buddy — Omar
– Omar, Commented May 1, 2013 at 0:27

Nelson Benítez León · Accepted Answer · 2013-05-01 00:22:11Z

2

Do it like this:

jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
    function () {
        $(this).removeClass("hasmore");
        $(this).addClass("selected");
        menuSubCloseAll.call(this, 'menuProducts');
        $('#menuProducts').find('li').slideToggle(200);
    });
});

You were actually changing the class of the first <a> in your page, not the <a> you clicked, which you can access directly in the handler with $(this) .

answered May 1, 2013 at 0:22

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

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

1 Comment

utdream Over a year ago

Thanks Nelson. Geez. I can't believe I missed that! =P

ppalmeida · Accepted Answer · 2013-05-01 00:29:25Z

0

Did you try use "this" inside the call??

$('#menuProducts a:first').on('click',
        function () {
           $(this).removeClass("hasmore");
            $(this).addClass("selected");
            menuSubCloseAll.call(this, 'menuProducts');
            $('#menuProducts').find('li').slideToggle(200);
        });

It worked for me

answered May 1, 2013 at 0:29

ppalmeida

2,9545 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

JQuery addClass() on Click Event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related