带有 display:none 的元素不被 jQuery 视为隐藏

Question

我有一个最初具有 display:none 的元素。当我单击一个按钮时，会触发一个 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-content 视为未隐藏，即使当我检查元素时，它也会显示 .other-element { 显示：无 };

有人知道为什么会这样吗？由于隐藏是使用 jQuery 切换的，它实际上可能不会改变 .hidden-content 自己的 css，但我不明白为什么在第一次点击时这应该是一个问题。

Answer 1

最简单的解决方案是向要更改其background-color 属性的元素添加一个CSS 类。看看吧：

在您的点击功能中，您可以使用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);
}