Simple Jquery slide down, add active class?

JavaScript
1

I have the following slide down menu.

Bar, click bar menu slides down below…



$(document).ready(function() {
		   
	$(".dropdown dt a").click(function() {
		$(".dropdown dd #panel").slideDown(150);		
	});
				
	$(".dropdown dd #panel").click(function() {
		$(".dropdown dd #panel").slideUp(150);
	});
	
	var myTimeout = null; 
	$(".dropdown").bind("mouseleave", function() { 
		myTimeout = window.setTimeout(function() { 
			 $(".dropdown dd #panel").slideUp(150); 
		}, 1000);  // <-- 1000ms 
	}); 
	
	$(".dropdown dd #panel").bind("mouseenter",function() { 
		window.clearTimeout(myTimeout); 
	}); 
	
	
});

Can someone help me out in adding an active class to the .dropdown dt a

So when you hover over the bar at the top (.dropdown dt a) it changes colour, but when you leave to go into the panel that has slid down it goes back to its normal state not hover state, because your not over it anymore.

Is it possible add an active class to .dropdown dt a whilst your in the slide down panel .dropdown dd #panel, so i can style it the same colour as the roll over giving the appearance its all connected…?

I’ve seen it done with a few drop down menus but cannot figure it out… :frowning:

Thanks for any help :slight_smile:

2

I’ve given it a go myself not really knowing what am doing and it kind of works…

$(document).ready(function() {
		   
	$(".dropdown dt a").click(function() {
		$(".dropdown dd #panel").slideDown(150);
		$('.dropdown dt a').addClass('active');		
	});
				
	$(".dropdown dd #panel a").click(function() {
		$(".dropdown dd #panel").slideUp(150);
		
	});
	
	var myTimeout = null; 
	$(".dropdown").bind("mouseleave", function() { 
		myTimeout = window.setTimeout(function() { 
			 $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
		}, 1000);$('.dropdown dt a').removeClass('active'); 
	}); 
	
	$(".dropdown dd #panel").bind("mouseenter",function() { 
		window.clearTimeout(myTimeout); 
	}); 
	
	
});

Problem is that when you leave the drop menu it rather jarringly removes the .class like a roll over, could do with it taking a similar amount of time as the slide back up so all works in tandem.

Perhaps add the same time of 150 to the .removeClass ?

I’m not sure…

3

Anyone help me out with the smooth transition from the remove class? :frowning: