Question

我正在尝试编写一个隐藏/显示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();
        }
    });

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

Answer 1

您可以使用.is(':visible')来测试某些内容是否可见，并使用.is(':hidden')来测试相反的内容：

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

参考：

Answer 2

是的，您可以在jquery中使用.is(':visible')。但是代码在safari浏览器下运行 .is(':visible')赢得了工作。

所以请使用以下代码

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

以上一行既适用于IE也适用于safari。

Answer 3

试

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

Answer 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();
    }
  });

Answer 5

在修复了与使用.is（“：visible”）相关的性能问题后，我建议不要使用上述答案，而是使用jQuery的代码来判断单个元素是否可见：

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

是什么。检查一组元素是否在另一组元素中。因此，您将在页面上的整个可见元素集中查找元素。拥有100个元素是很正常的，可能需要几毫秒来搜索可见元素数组。如果您正在构建一个Web应用程序，那么您可能有数百甚至数千个。我们的应用程序有时花费100毫秒来换取$（“＃selector”）。是（“：visible”）因为它检查一个元素是否在5000个其他元素的数组中。

Answer 6

如果可见。

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

如果它被隐藏了。

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

jQuery if语句来检查可见性

6 个答案: