当我点击除第一个div之外的另一个div时，我该怎么办?然后第一个div的css将消失

Question

我们对第一个div使用点击函数，当我点击它时，它的css将显示出来，就像我点击除第一个div之外的另一个div时所做的那样，然后第一个div的css将消失

$(document).ready(function(){
$('#Radio1').click(function(){
$('.RadioBack').css({'background-color':'lightgray','min-height':'100px'});
});
});

但它只会在我点击div RadioBack的radio1 css时显示，但当我点击div radio2、radio3、radio4 css时，RadioBack将永远不会消失

Answer 1

您没有包含任何html，所以我使用的是一个简单的红框，蓝框。

我建议不要在jQuery中指定css，而是在样式表中添加您的更改，然后在div上切换您想要更改的颜色的类名。

在本例中，单击红色框使其变为灰色，然后单击蓝色框使其再次变为红色。单击灰色框不会将其变为红色，因为我们正在使用:not()选择器来更改背景颜色。

$(document).ready(function() {
//When click on this div, change background colour.
$('#Radio1').click(function() {
$('.RadioBack').addClass('lightgray');
});

//When click on any other div, change background colour back.
$('div:not(#Radio1)').click(function() {
$('.RadioBack').removeClass('lightgray');
});
});

div {
width: 100px;
height: 100px;
background: red;
}
div+div {
background: blue;
}
div.lightgray {
background-color:lightgray;
min-height:100px'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="Radio1" class="RadioBack"></div>
<div></div>