jQuery if 语句检查可见性

jQuery if statement to check visibility

提问by Tomarz

I'm trying to write a script that will hidden/show div depending on other elements visibility. The action should take place when i click on other element. Here's what I've wrote so far:

我正在尝试编写一个脚本，该脚本将根据其他元素的可见性隐藏/显示 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();
        }
    });

It hides the div, but it doesn't come back when I hide the form. Will be greatful for any help :)

它隐藏了 div，但是当我隐藏表单时它不会回来。对任何帮助都会很有帮助:)

edit:

编辑：

Ok, I've managed to achive the desired effect by writing this:

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

$('#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();
        }
    });   

I don't know if it's written correctly but it works ;) Thanks everybody for help!

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

回答by ThiefMaster

You can use .is(':visible')to test if something is visible and .is(':hidden')to test for the opposite:

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

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

Reference:

参考：

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

• http://api.jquery.com/is/
• http://api.jquery.com/visible-selector/
• http://api.jquery.com/hidden-selector/

回答by Baskar Madasamy

Yes you can use .is(':visible')in jquery. But while the code is running under the safari browser .is(':visible')is won't work.

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

So please use the below code

所以请使用下面的代码

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

The above line will work both IE as well as safari also.

上面的行也适用于 IE 和 safari。

回答by kontur

try

尝试

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

回答by pravin

 $('#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();
    }
  });

回答by markdon

After fixing a performance issue related to the use of .is(":visible"), I would recommend against the above answers and instead use jQuery's code for deciding whether a single element is visible:

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

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

What .is does is check whether a set of elements is within another set of elements. So you will looking for your element within the entire set of visible elements on your page. Having 100 elements is pretty normal and might take a few milliseconds to search through the array of visible elements. If you're building a web app you probably have hundreds or possibly thousands. Our app was sometimes taking 100ms for $("#selector").is(":visible") since it was checking if an element was in an array of 5000 other elements.

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

回答by Nalan Madheswaran

if visible.

如果可见。

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

if it's hidden.

如果它是隐藏的。

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