Add a class with onclick js event

Question

I am trying to add a class .up to some menu items when another item is clicked. I am using js to add the class when the link is not opened in a new tab or window i.e. when item-129 is clicked the class up should be added to items 126, 127 and 128 however it is not working. Below are the js and html codes that I am using.

js code

keypressed = null;

$(window).keydown(function(event) {
    keypressed = event.keyCode;
});

$(window).keyup(function(event) {
    keypressed = null;
});

$("#item-129").click(function(event) {
    // Don't animate if command keys or ctrl keys held down
    if (keypressed == 91 || keypressed == 92 || keypressed == 17) {
        return true;
    }
    event.preventDefault();
    $("#item-126, #item-127, item-128").addClass("up");
    }, function() {
        $(this).attr("href"));
        location.href = $(this).attr("href");
    });
});

HTML code

<li id="item-126" class="item-126 deeper parent">
    <span class="nav-header">About Us</span>
    <ul class="nav-child unstyled small">
        <li id="item-129" class="item-129"><a href="/v1/index.php/aboutus/bio">Bio</a>  </li>
        <li id="item-130" class="item-130"><a href="/v1/index.php/aboutus/our-clients">Our Clients</a></li>
    </ul>
</li>
<li id="item-127" class="item-127"><span class="nav-header">Services</span></li>
<li id="item-128" class="item-128"><span class="nav-header">Contact Us</span></li>

What I am trying to achieve is to animate the menu using the class up then open the link in item-129.

Any help is much appreciated.

Thanks

You have of course used the developer tools (F12) to see if you got any errors, and you have verified whether the click event was fired in the first place. What was the outcome of those tests? — GolezTrol, Mar 23 '14 at 12:29
item-129 is wrapping a link, clicking li will trigger the link. You should trigger the click on the link and return false at the end — Jonathan de M., Mar 23 '14 at 12:32
Looks like you have an error in your code: http://jsfiddle.net/g2a33/ (What you're passing to the `click` function is nonsensical.) — Jared Farrish, Mar 23 '14 at 12:34
You're missing a `#` here: `$("#item-126, #item-127, item-128").addClass("up");` You're an additional paren here : `$(this).attr("href"));` — T J, Mar 23 '14 at 12:35
Thank you for your prompt replies. I fixed the errors indicated and added `return false` to the js code but am still getting the same result i.e the link opens straight away. What I am trying to achieve is to animate the menu using the class _up_ then open the link in item-129. — George Farrugia, Mar 23 '14 at 13:18
@JaredFarrish what is the difference from the previous jsfiddle? — George Farrugia, Mar 23 '14 at 13:51
`event.stopPropagation()` (Also note that I'm running it in the `onDOMReady` event, or `$(document).ready()`, that jsFiddle adds automatically.) — Jared Farrish, Mar 23 '14 at 14:01
@GeorgeFarrugia can you check this fiddle http://jsfiddle.net/39james/A2eZc/1/. I used your HTML but added a class name 'item' to all li items. — James, Mar 23 '14 at 14:03
@James Thanks for your insight. I did a few changes to your fiddle and got the desired effect. However when I paste the code in my js file it doesn't work:/ am I missing something? — George Farrugia, Mar 23 '14 at 19:15
@GeorgeFarrugia you have to add a class name "item" to all the li items, did you do that? — James, Mar 23 '14 at 19:17
@James No I removed that class as one of my edits...updated fiddle: http://jsfiddle.net/A2eZc/5/ — George Farrugia, Mar 23 '14 at 19:49
So is working your fiddle as you wanted? But "item-126" is missing a "." in your fiddle, should it be ".item-126" — James, Mar 23 '14 at 19:56
@JaredFarrish can you kindly add event.stopPropagation() and $(document).ready() as comments? — George Farrugia, Mar 24 '14 at 10:43

score 0 · Answer 1 · answered Mar 24 '14 at 22:56

You need to add event.stopPropagation() and use $(document).ready() or $(window).load():

$(document).ready(function(){
    keypressed = null;

    $(window).keydown(function(event) {
        keypressed = event.keyCode;
    });

    $(window).keyup(function(event) {
        keypressed = null;
    });

    $("#item-129").click(function(event) {
        // Don't animate if command keys or ctrl keys held down
        if (keypressed == 91 || keypressed == 92 || keypressed == 17) {
            return true;
        }

        event.stopPropagation();

        $("#item-126, #item-127, #item-128").addClass("up");

        return false;
    });
});

http://jsfiddle.net/g2a33/2/

Thanks a lot for the clarification. I added the code but am now getting this error **Uncaught TypeError: Property '$' of object [object Object] is not a function** on line 1. — George Farrugia, Mar 25 '14 at 12:02

Add a class with onclick js event

1 Answers1