jQuery .slideToggle change 'x'切换时的类背景

jQuery .slideToggle change 'x' class background when toggled

本文关键字：背景 slideToggle change jQuery      更新时间：2023-09-26

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

在'header .menu a'上单击'navigation'应该向下滑动并显示所有链接。我也想要。菜单'类，当'导航'向下时，将其背景设置为'#3D3D3D'，然后将背景设置为' whitessmoke '。

我一直在尝试'addClass'和'removeClass'对'. slidetoggle '的处理程序。

$( 'header .menu a' ).click( function() {
$( 'header nav' ).slideToggle( 'fast', function() {
    console.log('Toggle works');
   });
});
如果这是一个愚蠢的问题，我很抱歉。我有有限的jQuery经验，我渴望向你们学习。下面是js, css和html的目录

干杯!

好了，你只需要检查滑动条是否打开使用一个变量: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');
});
相关文章：