jQuery if 语句来检查可见性答案

【问题标题】：jQuery if statement to check visibilityjQuery if 语句来检查可见性
【发布时间】：2012-01-26 19:28:30
【问题描述】：

我正在尝试编写一个脚本，该脚本将根据其他元素的可见性隐藏/显示 div。当我点击其他元素时，该动作应该发生。以下是我目前所写的：

$('#column-left form').hide();
    $('.show-search').click(function() {
        $('#column-left form').stop(true, true).slideToggle(300);
        if( $('#column-left form').css('display') == 'none' ) {
            $("#offers").show();
        } else {
            $('#offers').hide();
        }
    });

它隐藏了 div，但是当我隐藏表单时它不会回来。将不胜感激任何帮助:)

编辑：

好的，我已经通过写这个来达到预期的效果：

$('#column-left form').hide();
    $('.show-search').click(function() {
        if ($('#column-left form').is(":hidden")) {
            $('#column-left form').slideToggle(300);
            $('#offers').hide();
        } else {
            $('#column-left form').slideToggle(300);
            $("#offers").show();
        }
    });

我不知道它是否写得正确，但它有效；）谢谢大家的帮助！

【问题讨论】：

标签： jquery if-statement hide show visible

【解决方案1】：

您可以使用.is(':visible') 测试是否可见，使用.is(':hidden') 测试相反：

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

参考：

【讨论】：

如果元素可见则返回true，否则返回false。值得注意。 ;)
“测试是否”暗示它返回一个布尔值；）
@Purmou: !$('#column-left form').is(':visible') 肯定会返回一个布尔值，但是此语句包含在切换中，因此它应该实现所需的输出.
值得注意的来自jQuery docs：Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

【解决方案2】：

是的，您可以在 jquery 中使用 .is(':visible')。但是当代码在 safari 浏览器下运行时 .is(':visible') 是行不通的。

所以请使用下面的代码

if( $(".example").offset().top > 0 )

上面的代码既适用于 IE，也适用于 safari。

【讨论】：

【解决方案3】：

试试

if ($('#column-left form:visible').length > 0) { ...

【讨论】：

不起作用，即使是空的 jQuery 对象在布尔上下文 (!![] === true) 中的计算结果为 true。您可以添加.length 以使其正常工作。，
@ThiefMaster：我已经编辑了kontur的答案，所以现在它是正确的！
Ty，已删除反对票。我会省略> 0，因为长度永远不会是负数。

【解决方案4】：

 $('#column-left form').hide();
 $('.show-search').click(function() {
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) {
        $("#offers").show();
    } else {
        $('#offers').hide();
    }
  });

【讨论】：

【解决方案5】：

在修复与使用 .is(":visible") 相关的性能问题后，我建议不要使用上述答案，而是使用 jQuery 的代码来确定单个元素是否可见：

$.expr.filters.visible($("#singleElementID")[0]);

.is 的作用是检查一组元素是否在另一组元素中。因此，您将在页面上的整个可见元素集中寻找您的元素。拥有 100 个元素是很正常的，并且可能需要几毫秒来搜索可见元素的数组。如果您正在构建一个网络应用程序，您可能有数百甚至数千个。我们的应用有时会花费 100 毫秒处理 $("#selector").is(":visible")，因为它正在检查一个元素是否在 5000 个其他元素的数组中。

【讨论】：

【解决方案6】：

如果可见。

$("#Element").is(':visible');

如果它被隐藏了。

$("#Element").is(':hidden');

【讨论】：