javascript - JQuery addClass() on Click Event - Stack Overflow

admin管理员组

文章数量:1410737

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: /

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!!

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/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!!

• javascript
• jquery
• css

Share Improve this question Follow edited May 1, 2013 at 0:24 utdream asked May 1, 2013 at 0:16 utdreamutdream 58311 gold badge33 silver badges1616 bronze badges 3

• 2 change $("a:first") with $(this). – Omar Commented May 1, 2013 at 0:21
• lol ::facepalm:: thanks Omar. – utdream Commented May 1, 2013 at 0:26
• a ment is faster than an answer and safer ;) wele buddy – Omar Commented May 1, 2013 at 0:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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) .

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

本文标签： javascriptJQuery addClass() on Click EventStack Overflow