Question

$("span").hide();

$("div").click(function(){
$(this).css({ 'backgroundColor': 'red' },200);
},function(){
$(this).css({ 'backgroundColor': 'pink' },200);
});

$("div").click(function(){
$("span").toggle();
});

我有一个按钮和一个菜单。单击粉红色按钮时，菜单将打开。我想要的是：当菜单打开时，按钮变为红色，当关闭时，按钮变回粉红色。

MY JS：http://jsfiddle.net/fhtdngdj/2/

Answer 1

创建两个CSS类，粉红色和红色。然后使用：

$("span").hide();
$("div").click(function () {
    $("span").toggle();
    $(this).toggleClass('red');
})

<强> jsFiddle example

Answer 2

还可以检查菜单是否可见并添加相应的类或编辑background-color属性。

$("div").click(function(){
$("span").toggle();
if($("#menu").is(':visible')){
    //or toggle class with toggleClass()
    $('#button').css('background-color','red');
}
else
    //or toggle class with toggleClass()
    $('#button').css('background-color','pink');
});

JsFiddle example

Answer 3

最简单的方法是在点击和悬停时使用toggleClass：http://jsfiddle.net/fhtdngdj/17/

$("span").hide();

$("div").click(function () {
    $("span").toggle();
    $(this).toggleClass('red');
});

$("div").hover(function() {
    $(this).toggleClass('blue');
});

然后只需在jsfiddle中为每个css类添加适当的背景颜色。

点击更改颜色

3 个答案: