我如何检查是否在jQuery 中隐藏了元素 ?

如何使元素的可见度.hide(), .show(),或.toggle()?

如果一个元素是visible或hidden?

当前回答

元素可以隐藏display:none, visibility:hidden或opacity:0这些方法之间的差异:

display:none隐藏元素,且不占用任何空间;
visibility:hidden隐藏元素,但它在布局中仍然占据空间;

opacity:0将元素隐藏为“ 可见性: 隐藏” , 它仍然占载着布局的空间; 唯一的区别在于不透明让一个元素部分透明;

if ($('.target').is(':hidden')) {
  $('.target').show();
} else {
  $('.target').hide();
}
if ($('.target').is(':visible')) {
  $('.target').hide();
} else {
  $('.target').show();
}

if ($('.target-visibility').css('visibility') == 'hidden') {
  $('.target-visibility').css({
    visibility: "visible",
    display: ""
  });
} else {
  $('.target-visibility').css({
    visibility: "hidden",
    display: ""
  });
}

if ($('.target-visibility').css('opacity') == "0") {
  $('.target-visibility').css({
    opacity: "1",
    display: ""
  });
} else {
  $('.target-visibility').css({
    opacity: "0",
    display: ""
  });
}

有用的 jQuery 切换方法 :

$('.click').click(function() {
  $('.target').toggle();
});

$('.click').click(function() {
  $('.target').slideToggle();
});

$('.click').click(function() {
  $('.target').fadeToggle();
});

2012-04-24 21:04:11

其他回答

这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden?"两者都不是:visible英:hidden将处理此事宜, 因为他们都在查找文档中的显示。就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度。以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

2011-03-24 18:44:10

if($("h1").is(":hidden")){
    // your code..
}

2016-03-23 13:21:42

你可以试试这个

$(document).ready(function() {
   var view = $(this).is(':visible');

   if(view) {
      alert("view");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

2022-06-27 13:05:39

您也可以使用 plain JavaScript 来做到这一点 :

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

注:

到处工作
嵌套元素的工程
CSS 和内嵌样式的工作
不需要框架

2012-07-16 19:18:19

公平地说,问题在日期之前这笔回答。

我不是要批评《任择议定书》,而是要帮助任何仍在提出这一问题的人。

确定某物是否可见的正确方法是咨询你的视觉模型;

如果你不知道这意味着什么那你就要踏上发现之旅让你的工作变得不那么困难了

以下是对示范 -- -- 观观 -- -- 模型建筑(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 的可见度;它参考视觉模型。

2017-03-25 08:49:30

我如何检查是否在jQuery 中隐藏了元素 ?

推荐文章

最新文章

标签