jQuery`.is（“：visible”）`不能在Chrome中工作
if ($("#makespan").is(":visible") == true) { var make = $("#make").val(); } else { var make = $("#othermake").val(); } Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake> - <span id=othermakecancel class=txtbutton>Cancel</span></span> 上面的代码在Firefox中运行平稳，但在Chrome中似乎不起作用。 在Chrome中，它显示.is(":visible") = false即使它是true 。
我正在使用以下jQuery版本：jquery-1.4.3.min.js
jsFiddle链接： http : //jsfiddle.net/WJU2r/4/
看来jQuery的:visibleselect器不适用于Chrome中的一些内联元素。
解决方法是添加一个显示样式，如"block"或"inline-block" ，使其工作。
另外请注意，jQuery对许多开发人员可见的定义有些不同
如果元素消耗文档中的空间，则认为它们是可见的。
可见元素的宽度或高度大于零。具有
visibility: hidden元素visibility: hidden或opacity: 0被视为可见的，因为它们仍然占用布局中的空间。不在文档中的元素被认为是隐藏的; jQuery没有办法知道它们在追加到文档后是否可见，因为它取决于适用的样式。
所有选项元素被视为隐藏，无论其select状态如何。
在隐藏元素的animation期间，元素被视为可见，直到animation结束。 在animation显示元素的过程中，该元素在animation开始时被认为是可见的。
换句话说， 消耗空间的元素是可见的，这意味着元素必须具有宽度和高度来消耗空间并且是可见的。
另一方面，即使它的visibility被设置为hidden或不透明度为零，它仍然:visible对于jQuery来说是:visible ，因为它消耗了空间，当CSS明确地声明它的可见性被隐藏时，这可能是混乱的。
看看它的简单方法是，如果你可以看到屏幕上的元素，即使你看不到它的内容，它是透明的，它是可见的，即占用空间。
我清理了一下你的标记，并添加了一个显示样式（ 即设置元素显示为“阻止”等 ），这对我来说很有效：
小提琴
官方API参考:visible
从jQuery 3开始， :visible的定义略有改变
jQuery 3略微修改了
:visible（因此:hidden）的含义。
从这个版本开始，将考虑元素:visible如果它们具有任何布局框（包括零宽度和/或高度），则:visible。 例如，br元素和没有内容的内联元素将被:visibleselect器选中。
我不知道为什么你的代码不能在chrome上工作，但我build议你使用一些解决方法：
$el.is(':visible') === $el.is(':not(:hidden)');
要么
$el.is(':visible') === !$el.is(':hidden');
如果你确定jQuery在chrome中给你一些不好的结果，你可以依靠css规则检查：
if($el.css('display') !== 'none') { // i'm visible }
另外，你可能想要使用最新的jQuery，因为它可能有固定的旧版本的bug。
如果你阅读jQuery文档，有很多原因不被视为可见/隐藏：
他们的CSS显示值为none。
它们是type =“hidden”的表单元素。
它们的宽度和高度显式设置为0。
祖先元素是隐藏的，所以元素不会显示在页面上。
http://api.jquery.com/visible-selector/
这里有一个小的jsfiddle例子，其中包含一个可见元素和一个隐藏元素：
Internet Explorer，Chrome，Firefox …
跨浏览器function“isVisible（）”
//check if exist and is visible function isVisible(id) { var element = $('#' + id); if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') { return true; } else { return false; } }
完整的例子：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> //check if exist and is visible function isVisible(id) { var element = $('#' + id); if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') { return true; } else { return false; } } function check(id) { if (isVisible(id)) { alert('visible: true'); } else { alert('visible: false'); } return false; } </script> <style type="text/css"> #fullname{ display: none; } #vote{ visibility: hidden; } </style> <title>Full example: isVisible function</title> </head> <body> <div id="hello-world"> Hello World! </div> <div id="fullname"> Fernando Mosquera Catarecha </div> <div id="vote"> rate it! </div> <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br /> <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br /> <a href="#" onclick="check('vote');">Check isVisible('vote')</a> </body> </html>
问候，
费尔南多
有一个奇怪的情况，如果该元素设置为display: inline jQuery检查可见性失败。
例：
CSS
#myspan {display: inline;}
jQuery的
$('#myspan').show(); // Our element is `inline` instead of `block` $('#myspan').is(":visible"); // This is false
要解决这个问题，你可以在jQuery中隐藏元素，而不是show/hide或者toggle()应该可以正常工作。
$('#myspan').hide() $('#otherElement').on('click', function() { $('#myspan').toggle(); });
我认为这与我们的HTML中的一个怪癖有关，因为在同一页面上的其他地方工作得很好。
我能够解决这个问题的唯一方法是做：
if($('#element_id').css('display') == 'none') { // Take element is hidden action } else { // Take element is visible action }
一般来说，当我的对象的父母隐藏时，我生活在这种情况下 例如，当html是这样的：
<div class="div-parent" style="display:none"> <div class="div-child" style="display:block"> </div> </div>
如果你问孩子是否可见，如：
$(".div-child").is(":visible");
它会返回false，因为它的父母是不可见的，所以也不会看到div。
我在父级上添加了下一个样式，.is（“：visible”）工作。
显示：内联块;
确定元素是否可见的跨浏览器/版本解决scheme是在显示/隐藏的元素上添加/删除css类。 元素的默认（可见）状态可能是这样的：
<span id="span1" class="visible">Span text</span>
然后隐藏，删除类：
$("#span1").removeClass("visible").hide();
在展会上，再次添加：
$("#span1").addClass("visible").show();
然后确定元素是否可见，使用这个：
if ($("#span1").hasClass("visible")) { // do something }
这也解决了性能问题，这可能会导致大量使用jQuery文档中指定的“：visible”select器：
大量使用此select器可能会影响性能，因为它可能会强制浏览器在确定可见性之前重新呈现页面。 通过其他方法跟踪元素的可见性，例如使用一个类，可以提供更好的性能。
官方jQuery API“：可见”select器的文档
如果一个项目是隐藏项目的子项（“：visible”）将返回true，这是不正确的。
我只是通过添加“显示：inheritance”到子项目来解决这个问题。 这将为我修复：
<div class="parent"> <div class="child"> </div> <div>
和CSS：
.parent{ display: hidden; } .child{ display: inherit; }
现在，可以通过更改父项的可见性来有效地打开和closures项目，$（element）.is（“：visible”）将返回父项目的可见性
这是jquery.js中的一段代码，它在is（“：visible”）被调用时执行：
if (jQuery.expr && jQuery.expr.filters){ jQuery.expr.filters.hidden = function( elem ) { return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); }; jQuery.expr.filters.visible = function( elem ) { return !jQuery.expr.filters.hidden( elem ); }; }
正如您所看到的，它不仅仅使用CSS显示属性。 这也取决于元素内容的宽度和高度。 因此，确保元素有一些宽度和高度。 为此，您可能需要将display属性设置为"inline-block"或"block"
我需要使用可见性：隐藏的显示内容：没有，因为可见性需要事件，而显示不。
所以我做.attr('visibility') === "visible"
