使用visibility：hidden设置可见性的jQuery .hide()等效方法

Question

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

是否有一种等价的函数可以设置visibility:hidden属性？

我知道我可以使用.css()，但我更喜欢像.hide()这样的函数。谢谢。

- Tomas

---

您可以基于.toggle()实现自己的函数。 - zerkms

我也很喜欢jQuery的toggleClass()方法 :) http://jqueryui.com/toggleClass/ 请随意查看我在下面回答中分享的示例 https://dev59.com/qGkw5IYBdhLWcg3w1eC7#14632687 - Chaya Cooper

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

如果你想重载原始的 jQuery toggle()，我并不推荐这样做...

!(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。

- alex

---

以那种方式看待它是多余的，但它有一个目的。如果将其与(function() { })()或类似的另一个脚本连接起来，ASI就不会生效，因为它看起来像一个函数调用。尝试这个，然后删除!。 - alex

@NoBugs自动分号插入。我在这里写了一篇关于它的博客文章。 - alex

@poitroae 当然可以，但请记住您可以自由编辑答案。我认为混合风格是不好的做法，而我却这样做了。 - alex

这在使用谷歌地图时非常有效，gmaps加载的面板必须可见，以便它可以计算出宽度/高度等。如果您的面板最初设置为display:none，则地图将无法正确显示。但是，设置visibility:hidden将起作用，并且上述函数允许我使用jquery轻松管理可见状态。谢谢！ - Terry Kernan

@VishalSakaria 我所知道的，这不是一个很明确定义的术语，所以在这里使用应该没问题。 - alex

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

这里有一个有效的实例。

- James Allardice

---

好观点，只是习惯使然。谢谢。给Alex的回答加一！ - James Allardice

只是好奇，将这两个函数包裹在(function($) {...}(jQuery));包装器中的意义是什么？我以前从未在jQuery中定义过自己的函数，我总是直接在JavaScript中定义函数。 - VoidKing

@VoidKing - 这只是 jQuery 插件的“最佳实践”，如文档所述。它允许您在函数内部使用 $ 标识符，即使它在父级作用域中指代其他内容也可以。 - James Allardice

jQuery实际上有一个内置的toggleClass()方法来实现这个功能 :) http://jqueryui.com/toggleClass/ 请随意查看我在下面回答中分享的示例 https://dev59.com/qGkw5IYBdhLWcg3w1eC7#14632687 - Chaya Cooper

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

- Chaya Cooper

---

我喜欢这种方法。虽然它需要单独的样式表，但它可以将所有样式信息保存在样式表中，这是应该属于的地方，因此它不是很自包含。如果您想禁用可见性，则可以在一个地方更改css标签，而无需更改所有js代码。 - vaughan

对于使用 Bootstrap 的用户，该类别被称为 "invisible"。 - user239558

Answer 4

如果您只需要使用visibility:hidden的标准隐藏功能来保持当前布局，则可以使用hide的回调函数来更改标签中的css。 JQuery中的Hide文档

一个例子：

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

这将使用常规的酷炫动画来隐藏div，但是动画完成后您将设置visibility为hidden并将display设置为block。

例如：http://jsfiddle.net/bTkKG/1/

我知道您不想要$("#aa").css()解决方案，但是您没有说明是因为只使用css（）方法会失去动画效果。

- h3ct0r

Answer 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 是为了满足流畅接口 "设计模式"。

这里是工作示例。

---

下面我还提供了一个 非常不推荐的 替代方案，但它可能更接近问题的答案。

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。

工作示例在这里。

- Kamil Kiełczewski

Answer 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;

- Teet Kalm