Jquery add & removeClass help ul li ul li

JavaScript
1

Hi I have a drop down that works purely in css but I am using jquery for browser behavoir.

The menu looks like this:

<ul>
<li class=“current”>home</li>
<li>contact
<ul><li>London</li><li>Belfast</li></ul>
</li>
</ul>

When I roll over the sub nav I want contact (the parent?) to highlight and when I rollout of the menu I want home to stay on current but with the jquery I am using all the first level li’s get the class current added and removed. How can I target the sub ul’s parent li and not all the first level li’s?

This is what I have so far:

$('ul#menu li ul li').mouseover(function() {
		$('ul#menu li').addClass('current');
	}).mouseout(function() {
		$('ul#menu li').removeClass('current')
	});
2

cant anyone help?

3

Because the this keyword will be the sub-li - you can use $(this).parents(‘li’) to get where you need to go.

4

wouldnt I want to use parent?

I have tried what you recommended but the parent li doesnt change to current now. This is the revised code:


$('ul#menu li ul li').mouseover(function() {
		$(this).parent('li').addClass('current');
		alert('test');
	}).mouseout(function() {
		$(this).parent().removeClass('current')
	});

the alert test pops up when i roll over the drop down sub nav…

5

ok ive made some progress but a new problem happens now:

$('ul#menu li ul li').mouseover(function() {
		$(this).parent().parent().addClass('current');
	}).mouseout(function() {
		$(this).parent().parent().removeClass('current')
	});

when I rollover the dropdown parent li stays highlighted but when I rollout the dropdown doesn’t disappear it stays open… Any ideas why it does this?

*edit the drop down doesnt close in IE7 and Opera but it does in FF :goof:

6

Try replacing mouseover and mouseout with the hover event instead. That should keep the this keyword nice and consistent.


$('ul#menu li ul li').hover(function() {
    $(this).parent().parent().addClass('current');
}, function() {
    $(this).parent().parent().removeClass('current');
});
7

OK I am now using hover but the drop down stays open in IE7 and Opera still… Why does it do this and what is the fix?

8

Unless there is some way to simulate what you’re experiencing, there is very little help that can be given.

9

while trying to simulate an example for you I found some JS that was conflicting and the drop down now disappears but I now have a new question…

By default the current page menu tab has current on it:
<li class=“current”>
but now I am using this new JS it removes the bold text from the current page menu tab… Maybe it is easier to show you the code I am trying to use now and hopefully you understand what I am trying to do?


$('ul#menu li ul li a').hover(function() {
    $(this).parent().parent().parent().addClass('[B]current2[/B]');
	if{
		$('ul#menu li ul li.current').hover(function(){
			$(this).parent().parent().parent().addClass('[B]current[/B]');
		}
	}
}, function() {
    $(this).parent().parent().parent().removeClass('current2');
});

I tried adding an if { } on line 3 but this destroys everything. Before me trying to add the if { } the <li class=“current”> changes to <li class=“current2”> which I don’t want… I want <li class=“current”> to stay like that…

Please can you help add an if statement into this script? I will try to write the steps and hopefully this will be clearer on what I want to do:

if you hover on ul#menu li ul li a
add current2
but if you hover on ul#menu li ul li.current a
dont add current2
when you rollout on ul#menu li ul li a
remove current2
but if you rollout ul#menu li ul li.current a
DONT remove current

hope this makes sense?

10

The syntax for an if statement is:


if (condition) {
    statements;
}

So, if I’m understanding what you’re requirements are, you need a normal add/remove of current2, unless there is a parent element that is already called current.

I’m having a tough time visualising what you’re wanting to achieve.

11

OK click here to see what I am trying to do

The current menu tab is Test. This text is white and bold. When you rollover the test dropdown the bold disappears and comes back when you rollout. I want the bold to stay on Test. When you rollover Contact I want the text to be white and NOT be bold. When you rollout of Contact I want it to go back to black text.

This is what I am using atm with the new if statement


$('ul#menu li ul li a').hover(function() {
    $(this).parent().parent().parent().addClass('current2');
	if ('ul#menu li ul li.current a') {
    $(this).parent().parent().parent().addClass('current');
}
}, function() {
    $(this).parent().parent().parent().removeClass('current2');
	
});
12

hey pmw57 check my last post I create an example for you to see in my last post…

Do you understand what I am trying to do?

13

Wooh, the pretty stars. I need togo to the doctor soon. Am drugged up to high heaven and the broken ribs aren’t healing. Whee!

14

wtf?

15

I have not been able to figure out how to do this… Would anyone care to help?
I uploaded the test menu here

When you hover over the ‘Test’ menu dropdown the bold is remove from ‘Test’ but I want it to stay bold. When you rollover ‘Contact’ the text changes to bold which I dont want. Should I create 2 new functions or can this be done in the same one?

This is the jQuery being used atm:

$(document).ready( function(){

$('ul#menu li ul li a').hover(function() {
    $(this).parent().parent().parent().addClass('current2');
	if ('ul#menu li ul li.current a') {
    $(this).parent().parent().parent().addClass('current');
}
}, function() {
    $(this).parent().parent().parent().removeClass('current2');
});	
	 
});
16

thanks for giving up on me folks

17