我有一个显示器的元素:最初没有。当我单击一个按钮时,会触发一个jQuery事件,当单击该按钮时,我的脚本会在块和无块之间切换元素的显示属性。
我正在努力使元素的父元素的背景根据元素是否被隐藏而改变颜色。
$("#button").on('click', function(){
if($(".hidden-content").is(":hidden")) {
$(".other-element").css("background-color","rgba(20,20,20,.9)");
} else {
$(".other-element").css("background-color","rgba(20,20,20,0)");
}
})
出于某种原因,当我点击按钮切换下拉列表时,jQuery会将.hidden内容视为未被隐藏,即使在我检查元素时,它说 .other-element {display:none};
有谁知道为什么会这样?由于使用jQuery切换隐藏,它实际上可能不会改变.hidden-content自己的css,但我不明白为什么在第一次点击时这应该是一个问题。
答案 0 :(得分:1)
最简单的解决方案是将CSS类添加到要更改其background-color
属性的元素。看看:
在您的点击功能中,您可以使用jQuery的.toggleClass()
方法在每次单击按钮时添加和删除CSS类。在CSS中,您可以使用新的类选择器覆盖默认的背景颜色。下面是一个例子。听起来你有自己隐藏和显示内容的方法,所以对于这个例子,我只是要使用jQuery的.toggle()
函数来做这一点。
我也为你创建了working example on CodePen:)
$('#button').on('click', function() {
// The important part: add and remove the CSS class to change colors!
$('#parent-element').toggleClass('content-on');
// Hide and show the content element. You can do this differently of course:
$('.content').toggle();
});
你的CSS看起来像这样:
#parent-element {
background-color: rgba(20,20,20,.9);
}
#parent-element.content-on {
background-color: rgba(20,20,20,0);
}