jQuery if element has class add class to 'this'

Question

I am trying to make a menu where if a user hovers on 'menuItem' it will only show the submenu for that specific element.

I know you can use $(this) but in the jQuery when i change

$(subMenu).removeClass("hide-submenu").addClass("show-submenu");

to

$(this).removeClass("hide-submenu").addClass("show-submenu");

It doesnt seem to work

var menuItem = $("nav > ul > li > a");

var subMenu = $("ul > li > ul");


$(subMenu).addClass("hide-submenu");

$(menuItem).hover(function(){
if($(subMenu).hasClass("hide-submenu")) {
        $(subMenu).removeClass("hide-submenu").addClass("show-submenu");
}
else {
        $(subMenu).removeClass("show-submenu").addClass("hide-submenu");
}
});

Below is my HTML

<nav>
    <ul>
        <li>
            <a>MENU ITEM</a>
                <ul>
                    <li><a href="#">SUB ITEM 1</a></li>
                    <li><a href="#">SUB ITEM 2</a></li>
                    <li><a href="#">SUB ITEM 3</a></li>
                </ul>
        </li>

    </ul>
</nav>

In you hover callback this would be your menuItem not subMenu — Musa
– Musa, Commented Jul 26, 2013 at 11:13
You can use an jQuery toggle function, this will save you a few lines of coding. — Jonathan Römer
– Jonathan Römer, Commented Jul 26, 2013 at 11:15

Piyush Arora · Accepted Answer · 2013-07-26 11:16:55Z

1

Because $(this) contains $(menuItem) as Event is being called on $(menuItem).

answered Jul 26, 2013 at 11:16

Piyush Arora

1381 silver badge12 bronze badges

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

Comments

palaѕн · Accepted Answer · 2013-07-26 11:17:07Z

0

In your code when you hover inside the $(menuItem) then when you use this, it refers to the $(menuItem) not to the $(subMenu). Hence you can not use this here like you wanted to use it. Instead you can do this:

menuItem.hover(function () {

    // Go to the next sibling `ul` in the current scope, using `this`
    var $next = $(this).next('ul');  

    if ($next.hasClass("hide-submenu")) {
        $next.removeClass("hide-submenu").addClass("show-submenu");
    } else {
        $next.removeClass("show-submenu").addClass("hide-submenu");
    }
});

One more thing:

var menuItem = $("nav > ul > li > a");

menuItem is already a jQuery object here, you don't need to do $(menuItem) again. Same goes for the subMenu.

answered Jul 26, 2013 at 11:17

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

krishwader · Accepted Answer · 2013-07-26 11:16:44Z

0

Use,

var menuItem = $("nav ul li a");
var subMenu = $("ul li ul");

instead of

var menuItem = $("nav > ul > li > a");
var subMenu = $("ul > li > ul");

edited Jul 26, 2013 at 11:16

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

answered Jul 26, 2013 at 11:15

Debasish Chowdhury

1882 silver badges12 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-07-26 11:47:37Z

0

You may want

$("ul > li > ul").addClass("hide-submenu");

var menuItem = $("nav > ul > li");
menuItem.hover(function(){
    $(this).children('ul').removeClass("hide-submenu").addClass("show-submenu");
}, function(){
    $(this).children('ul').removeClass("show-submenu").addClass("hide-submenu");
});

Demo: Fiddle

answered Jul 26, 2013 at 11:47

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

jQuery if element has class add class to 'this'

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related