jQuery .slideToggle change 'x' class background when toggled

Question

So for the last two hours or so I have been trying to execute a piece of code and so far everything is working except one key component.

On 'header .menu a' click the 'navigation' is supposed to slide down and display all of the links. I also want the '.menu' class to have its background set to '#3D3D3D' when the 'navigation' is down and turn into background 'whitesmoke' afterwards.

I have been trying 'addClass' and 'removeClass' on the handlers of the '.slideToggle'.

$( 'header .menu a' ).click( function() {
$( 'header nav' ).slideToggle( 'fast', function() {
    console.log('Toggle works');
   });
});

I am sorry if this is a dumb question. I have limited jQuery experience and I am eager to learn from you guys. Here is the Fiddle for the js, css and html.

Cheers!

Answer 1

here you go, you just need to check if the slider is opened or not using a variable: http://jsfiddle.net/68zNp/12/

var opened=false;
// Code for header button -- menu.
 $( 'header .menu a' ).mouseenter( function() {
    console.log("Menu anchor entered");
    $( 'header .menu' ).css('background', '#3D3D3D');
    $( 'header .menu a' ).css('color', '#F8F7F7');
}).mouseleave( function() {
     if(!opened){
    console.log("'Menu anchor' left");
    $( 'header .menu' ).css('background', 'whitesmoke');
    $( 'header .menu a').css('color', '#3D3D3D');
     }
});

// Header toggle code
$( 'header .menu a' ).click( function() {
    console.log('Ouch, you clicked me!');
    if(!opened){
            opened=true;
        }
        else{
            opened=false;
        }
    $( 'header nav' ).slideToggle( 'fast', function() {
        console.log('Toggle works');
    });
});


// Code for header button -- down.
$( 'header .down a' ).mouseenter( function() {
    console.log("'Chevron down' entered");
    $( 'header .down' ).css('background', '#FF8B59');
    $( 'header .down a' ).css('color', '#F8F7F7');
}).mouseleave( function() {
    console.log("'Chevron down' left");
    $( 'header .down' ).css('background', 'whitesmoke');
    $( 'header .down a').css('color', '#3D3D3D');
});