如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
测试一个元素时:hidden在 jQuery 中选择器一个绝对定位元素可能被确认为隐藏,尽管其子元素是可见的.
虽然仔细看一看jQuery文件提供了相关信息,
要素可被视为隐藏,原因如下:[.]其宽度和高度明确定为0。 [.]
因此,在框模型和元素的计算样式方面,这实际上是有道理的。即使没有设置宽度和高度明确无误可设定 0 个至 0个隐含.
举例如下:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>jQuery 3. x 的更新 :
当 j 查询 3 时, 描述的行为将会改变 ! 如果元素有任何布局框, 包括宽度和/ 或高度为零的布局框, 元素将被视为可见 。
JSF与jQuery 3. 0.0- 阿尔法1:
同样的 JavaScript 代码将会有此输出 :
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
其他回答
您可以使用这个:
$(element).is(':visible');
示例代码
$(document).ready(function()
{
$("#toggle").click(function()
{
$("#content").toggle();
});
$("#visiblity").click(function()
{
if( $('#content').is(':visible') )
{
alert("visible"); // Put your code for visibility
}
else
{
alert("hidden");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p id="content">This is a Content</p>
<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>公平地说,问题在日期之前这笔回答。
我不是要批评《任择议定书》,而是要帮助任何仍在提出这一问题的人。
确定某物是否可见的正确方法是咨询你的视觉模型;
如果你不知道这意味着什么 那你就要踏上发现之旅 让你的工作变得不那么困难了
以下是对示范 -- -- 观观 -- -- 模型建筑(MVVM)。
击出JS是一个具有约束力的图书馆, 它会让您在不学习整个框架的情况下尝试这些 。
这里有一些 JavaScript 代码和一个DIV 可能可见也可能看不到。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
// Get current visibility state for the div
var x = IsDivVisible();
// Set it to the opposite
IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>
请注意,切换函数不与国防部协商确定 div 的可见度;它参考视觉模型。
if($("h1").is(":hidden")){
// your code..
}
原为:hide(), show()和toggle()内嵌 cs (display:none 或 显示: block) 到元素。 同样, 我们也可以很容易地使用永久运算符来检查元素是否隐藏或可见, 检查显示 CSS 。
更新:
- 您还需要检查元素 CSS 设置为可见度: “ 可见” 或“ 隐蔽” 。
- 如果显示属性被设置为内嵌区块、区块、弹性,则该元素也将是可见的。
这样我们就可以检查一个元素的属性, 使得它隐形。 所以它们是display: none和visibility: "hidden";
我们可以创建一个用于检查对隐藏元素负责的财产的物件:
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
我们可以通过在对象匹配中环绕每个关键值来检查密钥的元素属性是否与隐藏的属性值匹配 。
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
如果您想要检查像元素高度: 0 或宽度: 0 或以上这样的属性, 您可以扩展此对象, 并添加更多属性, 并且可以检查 。
