jQuery change css properties of an element when an element is visible

Question

I want to change the background color and text color of an element in my header when the menu is visible. I want to achieve a continuous menu look. however, i also want the element to go back to it's original style when the menu is hidden. However, my jQuery code does not work. There are no syntax errors but it still doesn't work. I have the code in an if statement. Here's the link to the jsFiddle

http://jsfiddle.net/kamvkg14/2/

Here's the code responsible for the style change

if ($('.account-menu').css('display') != 'none') {
  $('.header_account').css({
    'background-color': 'white',
    'padding-bottom': '16px',
    'color': 'black'
  });
} else {
  $('.header_account').css({
    'background-color': 'yellow',
    'padding-bottom': '0px',
    'color': '#00FFFF'
  });
}

That if statement gets evaluated only once when the page is loaded – it doesn’t magically react to any changes in the menu’s display status later on. You would have put that into your function that changes the menu state. But ideally, you should not manipulate CSS values directly, but simple add/remove a class to the element that takes care of the different formatting. — C3roe
– C3roe, Commented Jan 18, 2015 at 1:43
Since your fiddle was quite useless in that it did not even contain any element with class header_account, I introduced one – and then implemented what I said, by toggling an additional class on that element: jsfiddle.net/kamvkg14/5 — C3roe
– C3roe, Commented Jan 18, 2015 at 1:48

Lumi Lu · Accepted Answer · 2015-01-18 02:03:08Z

1

can find updated version in FIDDLE

$('.username-menu').hide();
$('.header_user').click(function(e){
  e.stopPropagation();
    if($('.username-menu').is(':hidden')) {
        $('.header_user').css({'background-color': 'yellow'},
                                 {'padding-bottom' : '0px'},
                                 {'color' : '#00FFFF'});
        $('.username-menu').show();
    } else {
        $('.header_user').css({'background-color': 'white'},
                                 {'padding-bottom' : '16px'},
                                 {'color' : 'black'});
        $('.username-menu').hide();
    }    
});

answered Jan 18, 2015 at 2:03

Lumi Lu

3,3011 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery change css properties of an element when an element is visible

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related