jQuery .slideToggle изменяет фон класса «x» при переключении

Итак, последние два часа или около того я пытался выполнить часть кода, и пока все работает, кроме одного ключевого компонента.

В «заголовке .menu a» нажмите «навигация», чтобы скользить вниз и отображать все ссылки. Я также хочу, чтобы фон класса «.menu» был установлен на «# 3D3D3D», когда «навигация» не работает, и впоследствии превращался в фоновый «белый дым».

Я пробовал «addClass» и «removeClass» в обработчиках «.slideToggle».

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

Извините, если это глупый вопрос. У меня ограниченный опыт работы с jQuery, и я очень хочу учиться у вас, ребята. Вот Fiddle для js, css и html.

Ваше здоровье!


javascript navigation toggle jquery nav
person Nocraze    schedule 21.07.2014    source источник
comment
проблема в том, что в событии mouseleave якоря фон меняется на белый дым, поэтому, что бы вы ни делали, он все еще будет белым дымом, когда вы отводите мышь от якоря!   -  person Amin Jafari    schedule 21.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

вот и все, вам просто нужно проверить, открыт ли слайдер или не используется переменная: 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');
});
person Amin Jafari    schedule 21.07.2014