如何让.css('display')为block，[0].hidden为false，而.is(':hidden')为true？

Question

我遇到了这样的情况：即使我执行了代码展示相同后缀的所有其他div，但其中一个特定的div仍然被隐藏了：$("[id$='-input-container']").show()。无论如何，$("#single-colorRange-color-input-container")仍然保持隐藏状态。我以为它可能在代码的后面某个地方被隐藏了，但是没有——在调用$inputContainers.show()之后，我添加了以下日志记录（debugger语句停止了所有随后的执行）：

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

在调用.show()之前，none被记录为css/display值。这是预期的。

然后，在调用.show()之后，block被记录为css/display值。这是预期的。

然后，false被记录为结果集中第一个（也是唯一一个）元素的hidden属性。这是预期的。

然而，调用.is(':hidden')却返回了true，这是意外的。

如何解释.css('display')的值为block，[0].hidden的值为false，而.is(':hidden')的值为true？实际上，即使调用.show()，该div仍然保持隐藏状态，如果没有合理的解释，为这个div添加特殊逻辑似乎是荒谬的。

- Dexygen

---

有演示吗？当我尝试使用演示元素时，我得到 - 无、块、假、假。 - Harry

我得到了与@Harry相同的结果：https://jsfiddle.net/nm3o0dvp/1/。请添加一个显示问题的示例。 - Rory McCrossan

好像 debugger 可能没有停止后续执行，或者至少这是我的结论，因为我确实在随后的代码中隐藏了 div。试图关闭问题，但无法关闭，因为已经有答案了，即使它们可能不涉及我的特定情况，它们仍然似乎可以帮助某些人。 - Dexygen

Answer 1

根据jQuery文档，hidden选择器可能会出现以下情况：

• CSS显示属性为none;
• 表单元素的type属性设置为“hidden”；
• 它们的宽度和高度明确设置为0；
• 祖先元素被隐藏，因此该元素未在页面上显示。

由于hidden是一个简单的布尔类型，display属性是块状的，我的猜测是最后三个原因之一，特别是最后一个。请确保所有祖先元素都可见。

- Marie

Answer 2

该元素的祖先节点可能被隐藏，这就是为什么.is()方法返回true的原因。

- Akshey Bhat

Answer 3

console.log($("#sic").css("display")); // 添加 css #sic { display : }

它显示了 HTML 标签的默认属性。这意味着如果标签是块级元素，则它将是块级元素；如果它被隐藏，则它将是无。

例如：

1.)

<div id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : block

2.)

<div style="display:none" id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : none

结果：

console.log($("#sic").css("display")); // It create the css like #sic{display: }

使用CSS的完整属性，如果 .is(':hidden')，则不会返回true。

在您的情况下：我更改了ID值，它太长了。

<div id="sic">Hello
</div>


#sic {
  display : none;
}


console.log($("#sic").css("display")); // None
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // true

只需编写完整的属性。

console.log($("#sic").css("display","block")); // displaying html
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // false

- Monty

Answer 4

element.hidden 只有在元素具有 HTML5 hidden 属性时才会进行评估。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

这个属性不能用来隐藏本来可以显示的内容。例如，它不应该用于隐藏选项卡界面的选项卡面板，因为这是一个样式决策，另一种样式显示它们会导致完全正确的页面。

JQuery hidden 是对象可见性的评估方式：

• 它们具有 CSS 显示值为 none。
• 它们是类型为“hidden”的表单元素。
• 它们的宽度和高度明确设置为 0。
• 祖先元素被隐藏，因此该元素不会在页面上显示。

https://api.jquery.com/hidden-selector/

- Sean Wessell