等效于 jQuery .hide() 设置可见性：隐藏答案

【问题标题】：Equivalent of jQuery .hide() to set visibility: hidden等效于 jQuery .hide() 设置可见性：隐藏
【发布时间】：2012-03-25 18:09:40
【问题描述】：

在 jQuery 中，有 .hide() 和 .show() 方法设置 CSS display: none 设置。

是否有可以设置visibility: hidden 设置的等效函数？

我知道我可以使用.css()，但我更喜欢.hide() 之类的功能。谢谢。

【问题讨论】：

可以基于.toggle()实现自己的
我也是 jQuery 的 toggleClass() 方法的粉丝 :) jqueryui.com/toggleClass 请随时查看我在stackoverflow.com/a/14632687/1056713下面的答案中分享的示例

标签： javascript jquery css visibility

【解决方案1】：

您可以制作自己的插件。

jQuery.fn.visible = function() {
    return this.css('visibility', 'visible');
};

jQuery.fn.invisible = function() {
    return this.css('visibility', 'hidden');
};

jQuery.fn.visibilityToggle = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};

如果你想重载原来的jQuerytoggle()，我不推荐...

!(function($) {
    var toggle = $.fn.toggle;
    $.fn.toggle = function() {
        var args = $.makeArray(arguments),
            lastArg = args.pop();

        if (lastArg == 'visibility') {
            return this.visibilityToggle();
        }

        return toggle.apply(this, arguments);
    };
})(jQuery);

jsFiddle.

【讨论】：

@Tomas 你必须隐藏toggle()，这可能会破坏其他脚本。如果您愿意，您可以向toggle() 添加一个额外的参数来指定是否应该切换visibility 或display。但是，我只是在上一个示例中使用自定义的。 :)
您能否发布一个示例，说明如何支持show 的附加参数（速度、缓动、回调）？
这样看是多余的，但这是有目的的。如果这被连接到另一个带有(function() { })() 或类似名称的脚本，ASI 将不会启动，因为它看起来像一个函数调用。尝试this，然后删除!。
@NoBugs 自动分号插入。我在这里写了一个blog post。
@VishalSakaria 据我所知，这并不是一个定义明确的术语，所以在这里使用它应该没问题。

【解决方案2】：

没有内置的，但您可以很容易地编写自己的：

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));

你可以这样称呼它：

$("#someElem").invisible();
$("#someOther").visible();

这是working example。

【讨论】：

好点，只是习惯的力量。谢谢。 +1 亚历克斯的回答！
只是好奇，将这两个函数包装在(function($) {...}(jQuery)); 包装器中的意义何在？我以前从未在 jQuery 中定义过自己的函数，我一直只是在直接的 JavaScript 中定义函数。
@VoidKing - 根据文档，这只是 jQuery 插件的“最佳实践”。它允许您在函数内使用 $ 标识符，即使它引用父范围内的其他内容。
jQuery 实际上有一个内置的 toggleClass() 方法：) jqueryui.com/toggleClass 请随时查看我在stackoverflow.com/a/14632687/1056713下面的答案中分享的示例

【解决方案3】：

更简单的方法是使用 jQuery 的 toggleClass() 方法

CSS

.newClass{visibility: hidden}

HTML

<a href="#" class=trigger>Trigger Element </a>
<div class="hidden_element">Some Content</div>

JS

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".hidden_element").toggleClass("newClass");
    });
});

【讨论】：

我喜欢这种方法。它不太独立，因为它需要单独的样式表，但它有助于将所有样式信息保留在它应该属于的样式表中。如果您想禁用可见性，您可以在一处更改 css 标记，而不是更改所有 js 代码。
对于那些使用引导程序的人来说，这个类被称为不可见的。

【解决方案4】：

如果您只需要使用可见性隐藏的标准功能：隐藏来保持当前布局，您可以使用隐藏的回调函数来更改标签中的 css。 Hide docs in jquery

一个例子：

$('#subs_selection_box').fadeOut('slow', function() {
      $(this).css({"visibility":"hidden"});
      $(this).css({"display":"block"});
});

这将使用正常的酷动画来隐藏 div，但在动画完成后，您将可见性设置为隐藏并显示为阻止。

一个例子：http://jsfiddle.net/bTkKG/1/

我知道您不想要 $("#aa").css() 解决方案，但您没有指定是否是因为仅使用 css() 方法会丢失动画。

【讨论】：

【解决方案5】：

纯 JS 等效于 jQuery hide()/show() ：

function hide(el) {
    el.style.visibility = 'hidden';    
    return el;
}

function show(el) {
    el.style.visibility = 'visible';    
    return el;
}

hide(document.querySelector(".test"));
// hide($('.test')[0])   // usage with jQuery

我们使用return el 是为了满足fluent interface“设计模式”。

这里是working example。

下面我还提供了 HIGHLY unrecommended 替代方案，但是这可能是更“接近问题”的答案：

HTMLElement.prototype.hide = function() {
    this.style.visibility = 'hidden';  
    return this;
}

HTMLElement.prototype.show = function() {
    this.style.visibility = 'visible';  
    return this;
}

document.querySelector(".test1").hide();
// $('.test1')[0].hide();   // usage with jQuery

当然这不会实现 jQuery 'each'（在 @JamesAllardice 答案中给出），因为我们在这里使用纯 js。

工作示例是here。

【讨论】：

【解决方案6】：

这是一种实现，类似于$.prop(name[,value]) 或$.attr(name[,value]) 函数。如果b变量被填充，则根据该变量设置可见性，并返回this（允许继续其他属性），否则返回可见性值。

jQuery.fn.visible = function (b) {
    if(b === undefined)
        return this.css('visibility')=="visible";
    else {
        this.css('visibility', b? 'visible' : 'hidden');
        return this;
    }
}

例子：

$("#result").visible(true).on('click',someFunction);
if($("#result").visible())
    do_something;

【讨论】：