Tương đương với jQuery. Suede () để đặt mức độ hiển thị: ẩn

Trong jQuery, có .hide()và .show()các phương thức display: nonethiết lập cài đặt CSS .

Có một chức năng tương đương sẽ thiết visibility: hiddenlập cài đặt?

Tôi biết tôi có thể sử dụng .css()nhưng tôi thích một số chức năng như .hide()thế. Cảm ơn.

Bạn có thể tạo các plugin của riêng bạn.

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

Nếu bạn muốn quá tải jQuery ban đầu toggle(), tôi không khuyên bạn nên ...

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

Không có cái nào được tích hợp sẵn nhưng bạn có thể tự viết khá dễ dàng:

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

Sau đó, bạn có thể gọi như vậy:

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

Đây là một ví dụ hoạt động .

Một cách thậm chí đơn giản hơn để làm điều này là sử dụng phương thức toggleClass () của jQuery

CSS

.newClass{visibility: hidden}

HTML

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

Mã não

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

Nếu bạn chỉ cần chức năng tiêu chuẩn của ẩn chỉ với khả năng hiển thị: ẩn để giữ bố cục hiện tại, bạn có thể sử dụng chức năng gọi lại của ẩn để thay đổi css trong thẻ. Ẩn tài liệu trong jquery

Một ví dụ :

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

Điều này sẽ sử dụng hình động mát mẻ bình thường để ẩn div, nhưng sau khi hoạt hình kết thúc, bạn đặt chế độ hiển thị thành ẩn và hiển thị thành chặn.

Một ví dụ: http://jsfiddle.net/bTkKG/1/

Tôi biết bạn không muốn giải pháp $ ("# aa"). Css (), nhưng bạn không chỉ định nếu đó là vì chỉ sử dụng phương thức css () bạn sẽ mất hình ảnh động.

Đây là một triển khai, những gì hoạt động như $.prop(name[,value])hoặc $.attr(name[,value])chức năng. Nếu bbiến được điền, mức độ hiển thị được đặt theo đó và thisđược trả về (cho phép tiếp tục với các thuộc tính khác), nếu không, nó sẽ trả về giá trị hiển thị.

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

Thí dụ:

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

Tương đương với JS thuần cho 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

Chúng tôi sử dụng return eldo đáp ứng "mô hình desing" lưu loát .

Dưới đây là ví dụ làm việc .

Dưới đây tôi cũng cung cấp giải pháp thay thế không được đề nghị CAO , tuy nhiên có lẽ câu trả lời "gần với câu hỏi" hơn:

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

tất nhiên điều này không triển khai jQuery ' every ' (được đưa ra trong câu trả lời @James ALLardice ) vì chúng tôi sử dụng js thuần ở đây.

Ví dụ làm việc là đây .