Javascript 如何使用jquery更改单击时的css属性？

正在寻找有关javascript的更多帮助！我一直在胡闹，我已经尝试和扩大它，我不能得到任何工作！无论如何，让我解释一下！下面将有一个演示，让你看看我在说什么

我希望能够改变背景的黑色，黄色，或红色方块时，点击，并恢复到正常的图像时，再次点击，我还希望窗口打开关闭第二次点击也

请帮忙！我知道这与使用.css函数有关，但我不知道怎么做！顺便说一句，我当前的真实背景图像是一个精灵，所以我不确定这是否会产生任何影响。谢谢大家!

这里有一些代码

HTML

JAVASCRIPT

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});

JSFIDLE演示

---

您可以通过以下方式完成：

  $("#onclick").click(function() {
        $("#log").css("display", "block");
    }); 

和我的#登录

CSS

：

#log{
    opacity:0.92; 
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
}

---

只需添加一个具有新背景的类，并在单击时将其切换

   $(this).toggleClass('blueBackground');

显示/隐藏内容也是如此

编辑

更新小提琴为您的评论

---

检查

你能编辑这个例子来展示我的代码是如何工作的吗？如果你去上面的JSFIDLE演示，你会看到一个黄色，黑色，红色方块，当你点击其中一个时，我希望颜色改变，当你再次点击时，颜色会变回原来的颜色。这很有效，但如果你按下另一个按钮，我也希望颜色会变回正常。如果你按下黑色按钮，它变成蓝色，然后按下红色按钮，我希望黑色按钮变为黑色，红色按钮变为蓝色dedit更近了，但是现在每个按钮的窗口都被弄乱了？

#log{
    opacity:0.92; 
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
}

   $(this).toggleClass('blueBackground');