带有显示的元素:没有被jQuery隐藏的数量

时间:2018-02-02 03:12:16

标签: javascript jquery html css

我有一个显示器的元素:最初没有。当我单击一个按钮时,会触发一个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,但我不明白为什么在第一次点击时这应该是一个问题。

1 个答案:

答案 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);
}