等效于jQuery .hide()设置可见性:隐藏

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

是否有可以设置visibility: hidden设置的等效功能

我知道我可以使用,.css()但是我喜欢某些类似的功能.hide()谢谢。

蛋蛋猿2020/03/23 10:04:52

没有内置的,但是您可以很容易地编写自己的:

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

这是一个有效的例子

梅泡芙2020/03/23 10:04:52

一个更简单的方法是使用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");
    });
});