jQuery .slideToggle在切換時更改'x'類背景

Question

因此，在過去的兩個小時左右，我一直在嘗試執行一段代碼，到目前爲止，除了一個關鍵組件外，一切正常。

在'header .menu a'上單擊'導航'應該滑下並顯示所有鏈接。我還希望當'導航'關閉時，'.menu'類的背景設置爲'＃3D3D3D'，之後變爲背景'whitesmoke'。

我一直在'.slideToggle'的處理器上嘗試'addClass'和'removeClass'。

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

對不起，如果這是一個愚蠢的問題。我限制jQuery的經驗，我渴望向你們學習。這裏是js，css和html的Fiddle。

乾杯！

Answer 1

在這裏你去，你只需要檢查，如果滑塊打開或不使用變量：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'); 
});