Javascript 显示的元素：无不被jQuery视为隐藏

我有一个元素具有display：none initially。单击按钮时，会触发jQuery事件，单击按钮时，我的脚本会在block和none之间切换元素的显示属性

我试图使其成为元素父元素的背景根据元素是否隐藏而改变颜色

$("#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内容视为未隐藏，即使我检查元素时，它也会这样说 .其他元素{显示：无}

---

有人知道为什么会这样吗？由于hiddenness是使用jQuery切换的，它实际上可能不会更改。隐藏内容本身的css，但我不明白为什么在第一次单击时会出现问题。

最简单的解决方案是向要更改其背景颜色属性的元素添加css类。请查看：

在click函数中，可以使用jQuery的.toggleClass方法在每次单击按钮时添加和删除CSS类。在CSS中，可以使用新的类选择器覆盖默认背景色。下面有一个例子。听起来您有自己的隐藏和显示内容的方法，所以在本例中，我将使用jQuery的.toggle函数来实现这一点

我也为您创建了一个：

$('#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);
}

---

。其他元素可能有{display:none}；，但是，隐藏内容呢，你实际上是在测试它？编辑：实际上没关系，你说。其他元素是父元素，因此。从理论上讲，隐藏的内容也应该被视为隐藏的。我建议你切换类，而不是像现在这样做。您可以创建一个名为hidden的类，其显示属性设置为hidden，以及其他一些类，其显示属性设置为block、inline或其他，并在单击按钮时切换这些类，然后测试元素是否具有隐藏类或其他类，并相应地设置其背景。希望这有帮助。只需弹出$.other-element.toggleClassColor；在jquery方法中，我已经按下了按钮。我不知道这为什么花了我这么长时间。谢谢