Setara dengan jQuery .hide () untuk mengatur visibilitas: disembunyikan


340

Di jQuery, ada .hide()dan .show()metode yang menetapkan display: nonepengaturan CSS .

Apakah ada fungsi setara yang akan mengatur visibility: hiddenpengaturan?

Saya tahu saya bisa menggunakan .css()tetapi saya lebih suka beberapa fungsi seperti .hide()atau lebih. Terima kasih.


2
Anda dapat mengimplementasikan sendiri berdasarkan.toggle()
zerkms

Saya juga penggemar metode toggleClass () jQuery untuk ini :) jqueryui.com/toggleClass Jangan ragu untuk melihat contoh yang saya bagikan di jawaban saya di bawah stackoverflow.com/a/14632687/1056713
Chaya Cooper

Jawaban:


426

Anda bisa membuat plugin sendiri.

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

Jika Anda ingin membebani jQuery asli toggle(), yang tidak saya sarankan ...

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


@ Thomas Anda harus membayangi toggle()yang dapat merusak skrip lain. Jika Anda mau, Anda bisa menambahkan argumen tambahan toggle()untuk menentukan apakah harus diubah visibilityatau displaytidak. Saya hanya menggunakan yang kustom dalam contoh terakhir saya, namun. :)
alex

Bisakah Anda memposting contoh tentang cara mendukung parameter tambahan show(kecepatan, pelonggaran, panggilan balik)?
georg

11
Sangat luar biasa jika Anda melihatnya seperti itu, tetapi ada tujuan. Jika ini digabungkan ke skrip lain dengan (function() { })()atau mirip, ASI tidak akan masuk karena sepertinya doa fungsi. Coba ini , lalu hapus !.
alex

1
@NoBugs Penyisipan Semi-kolon Otomatis. Saya menulis posting blog di sini.
alex

1
@VishalSakaria Ini bukan istilah yang didefinisikan dengan baik sejauh yang saya tahu, jadi tidak apa-apa untuk menggunakannya di sini.
alex

103

Tidak ada yang terintegrasi tetapi Anda dapat menulis sendiri dengan mudah:

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

Anda kemudian dapat memanggil seperti ini:

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

Ini contoh yang bagus .


1
Poin bagus, hanya kekuatan kebiasaan. Terima kasih. +1 untuk jawaban alex!
James Allardice

Hanya penasaran, apa gunanya membungkus kedua fungsi ini di (function($) {...}(jQuery));bungkusnya? Saya tidak pernah mendefinisikan fungsi saya sendiri di jQuery sebelumnya, saya selalu hanya mendefinisikan fungsi dalam JavaScript lurus.
Membatalkan

2
@VoidKing - Ini hanya "praktik terbaik" untuk plugin jQuery sesuai dokumen. Ini memungkinkan Anda untuk menggunakan $pengenal di dalam fungsi, bahkan jika itu merujuk ke sesuatu yang lain dalam lingkup induk.
James Allardice

jQuery sebenarnya memiliki metode toggleClass () bawaan untuk ini :) jqueryui.com/toggleClass Jangan ragu untuk melihat contoh yang saya bagikan di jawaban saya di bawah stackoverflow.com/a/14632687/1056713
Chaya Cooper

55

Cara yang lebih sederhana untuk melakukan ini adalah dengan menggunakan metode toggleClass () jQuery

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

1
Saya suka pendekatan ini. Ini kurang lengkap karena memerlukan stylesheet yang terpisah, tetapi membantu menjaga semua informasi style di stylesheet yang menjadi tempatnya. Jika Anda ingin menonaktifkan visibilitas, Anda dapat mengubah tag css di satu tempat alih-alih mengubah semua kode js Anda.
vaughan

19
Bagi mereka yang menggunakan bootstrap, kelas ini disebut invisible.
user239558

25

Jika Anda hanya membutuhkan fungsionalitas standar sembunyikan saja dengan visibilitas: disembunyikan untuk mempertahankan tata letak saat ini, Anda dapat menggunakan fungsi panggil balik sembunyikan untuk mengubah css pada tag. Sembunyikan dokumen dalam jquery

Sebuah contoh :

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

Ini akan menggunakan animasi keren biasa untuk menyembunyikan div, tetapi setelah animasi selesai Anda mengatur visibilitas ke tersembunyi dan tampilan untuk memblokir.

Contoh: http://jsfiddle.net/bTkKG/1/

Saya tahu Anda tidak menginginkan solusi $ ("# aa"). Css (), tetapi Anda tidak menentukan apakah itu karena hanya menggunakan metode css () Anda kehilangan animasinya.


2

Inilah satu implementasi, seperti apa fungsinya $.prop(name[,value])atau $.attr(name[,value])fungsinya. Jika bvariabel diisi, visibilitas diatur sesuai dengan itu, dan thisdikembalikan (memungkinkan untuk melanjutkan dengan properti lainnya), jika tidak maka akan mengembalikan nilai visibilitas.

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

Contoh:

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

1

Setara JS murni untuk sembunyikan jQuery () / 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

Kami menggunakan return elkarena untuk memenuhi antarmuka "pola desing" yang lancar .

Berikut ini contoh kerjanya .


Di bawah ini saya juga memberikan alternatif yang SANGAT tidak disarankan , yang mungkin lebih "mendekati pertanyaan":

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

tentu saja ini tidak menerapkan jQuery 'masing-masing' (diberikan dalam jawaban @JamesAllardice ) karena kami menggunakan js murni di sini.

Contoh kerja ada di sini .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.