jQuery .slideToggle 切换时更改“x”类背景答案

【问题标题】：jQuery .slideToggle change 'x' class background when toggledjQuery .slideToggle 切换时更改“x”类背景
【发布时间】：2014-07-21 16:18:30
【问题描述】：

所以在过去两个小时左右的时间里，我一直在尝试执行一段代码，到目前为止，除了一个关键组件之外，一切正常。

在“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。

干杯！

【问题讨论】：

问题是在锚点的mouseleave事件中，背景变成了“whitesmoke”，所以无论你做什么，当你把鼠标从锚点移开时，它仍然是“whitesmoke”！

标签： javascript jquery navigation toggle nav

【解决方案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');
});

【讨论】：