Javascript 当元素可见时，jQuery会更改元素的css属性

当菜单可见时，我想更改标题中元素的背景色和文本色。我想实现连续的菜单外观。但是，当菜单被隐藏时，我还希望元素恢复到其原始样式。但是，我的jQuery代码不起作用。虽然没有语法错误，但仍然不起作用。我在if语句中有代码。这里是指向JSFIDLE的链接

下面是负责样式更改的代码

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'
  });
}

---

可以在

$('.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();
    }    
});

---

加载页面时，

if

语句只计算一次–它不会对菜单显示状态的任何更改做出神奇的反应。您可以将其放入更改菜单状态的函数中。但理想情况下，您不应该直接操纵CSS值，而应该简单地向元素添加/删除一个类，以处理不同的格式。由于您的小提琴非常无用，因为它甚至不包含任何带有class

header\u account

的元素，我介绍了一个–然后实现了我所说的，通过在该元素上切换其他类：