Bagaimana cara menambahkan tampilan: inline-block di fungsi jQuery show ()?

158

Saya punya beberapa kode seperti ini:

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

Fungsi acara bertambah display:block. Tapi saya ingin menambahkan display:inline-blockbukan blokir.

Giri
sumber
1
Anda harus memberikan detail lebih lanjut. Ini berfungsi untuk saya dalam tes cepat: jsfiddle.net/DD3Sf .
Gijs
@gijs Maaf sudah berfungsi sekarang. Saya pikir ini beberapa masalah cache. Terima kasih atas waktu Anda
Giri

Jawaban:

209

Alih-alih show, coba gunakan CSS untuk menyembunyikan dan menampilkan konten.

function switch_tabs(obj) {
    $('.tab-content').css('display', 'none'); // you could still use `.hide()` here
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#' + id).css('display', 'inline-block');
    obj.addClass("selected");
}
Menggoda
sumber
92
Ini mungkin tampak jelas, tetapi jika Anda masih ingin memanfaatkan aspek waktu dari show( $("#id").show(500)), tambahkan saja cssfungsinya:$("#id").show(500).css("display", "inline-block");
BenR
2
Saya akan mengambil langkah lebih jauh dan mengurus semua persembunyian / menampilkan menggunakan kelas CSS, bukan jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); Dalam CSS:.hidden { display: none !important }
Joe Maffei
10
Meskipun ini adalah jawaban yang diterima tetapi tidak mencerminkan apa yang dinyatakan dalam dokumen jquery : Ini kira-kira sama dengan memanggil .css ("display", "block"), kecuali bahwa properti tampilan dikembalikan ke apa pun awalnya. Jika suatu elemen memiliki nilai tampilan inline, kemudian disembunyikan dan ditampilkan, itu sekali lagi akan ditampilkan inline. Jadi untuk memiliki default, displayAnda perlu menambahkan kelas di css Anda dengan display:inline-block;kemudian memanggil hide()dan show()menggunakan id elemen. Ini lebih bersih dan lebih mudah diprediksi dan lebih mudah ditata.
Abdullah Adeeb
1
@AbdullahAdeeb masalahnya adalah Anda harus melakukannya hide()dengan js saat memuat halaman. Pengaturan #element{display:inline-block;display:none;}tidak berhasil. Saya pikir solusi terbersih adalah $('#element').fadeIn().addClass('displaytype');- lebih baik daripada jawaban di atas, karena Anda dapat mengatur berbeda .displaytypedi css dan memiliki satu fungsi yang menunjukkan di js. Lihat jawaban saya di sini: stackoverflow.com/questions/1091322/…
Fanky
36

Mengatur properti CSS setelah Anda gunakan .show()harus bekerja. Mungkin Anda menargetkan elemen yang salah di halaman HTML Anda.

 $('#foo').css('display', 'inline-block');

Tetapi jika Anda tidak menggunakan efek .show(), .hide()mengapa Anda tidak mengatur properti CSS secara manual seperti:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');
desain mas
sumber
3
Perhatikan bahwa jquery show / hide / toggle mengembalikan nilai tampilan sebelumnya. Jadi jika Anda menyembunyikannya dengan jquery, memanggil acara akan bekerja.
Curtis Yallop
"Mengatur properti CSS setelah Anda menggunakan .show () seharusnya berfungsi." Apa gunanya menggunakan show () jika Anda hanya akan memperbarui css secara manual?
JSON
9

Gunakan css () sesaat setelah show () atau fadeIn () seperti ini:

$('div.className').fadeIn().css('display', 'inline-block');
Yura Loginov
sumber
5

Saya melakukan itu

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

bekerja seperti pesona.

pengguna2204545
sumber
7
Apakah itu jawaban atau pengakuan ..?
NREZ
5

Solusi Razz akan bekerja untuk .hide()dan .show()metode tetapi tidak akan bekerja untuk.toggle() metode.

Tergantung pada skenarionya, memiliki kelas css .inline_block { display: inline-block; }dan menelepon $(element).toggleClass('inline_block')memecahkan masalah bagi saya.

pengguna968903
sumber
2

Anda dapat menggunakan animate insted show / hide

Sesuatu seperti ini:

function switch_tabs(obj)
{
    $('.tab-content').animate({opacity:0},3000);
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).animate({opacity:1},3000);
    obj.addClass("selected");
}
Narek
sumber
2

coba ini:

$('#foo').show(0).css('display','inline-block');
Carlos
sumber
Dalam show()hal ini tidak ada gunanya. Ini sama dengan$('#foo').css('display','inline-block');
Liam
@Liam Tidak ada gunanya. Anda dapat mengubah 0 untuk memudahkan, atau memodifikasi ini untuk mendapatkan akses ke showopsi unik lainnya.
JSideris
2

Saya pikir Anda ingin animasi dan mengatur properti tampilan di akhir. Dalam hal ini Anda lebih baik menggunakan show()panggilan balik seperti yang ditunjukkan di bawah ini

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

Dengan cara ini Anda akan mencapai kedua hasil.

Reza
sumber
Ini tidak benar, Anda akan berakhir dengan inline-blockmode hanya setelah seluruh animasi berjalan. Itu berarti "pop" antara blockdan inline-blocksetelah 400ms.
Alexis Wilke
1
<style>
.demo-ele{display:inline-block}
</style>

<div class="demo-ele" style="display:none">...</div>

<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>
Jon
sumber
0

sebenarnya jQuery hanya membersihkan nilai properti 'display', dan tidak mengaturnya menjadi 'block' (lihat implementasi internal jQuery.showHide ()) -

   function showHide(elements, show) {
    var display, elem, hidden,

...

         if (show) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if (!values[index] && display === "none") {
                elem.style.display = "";
            }

...

        if (!show || elem.style.display === "none" || elem.style.display === "") {
            elem.style.display = show ? values[index] || "" : "none";
        }
    }

Harap dicatat bahwa Anda dapat mengganti $ .fn.show () / $. Fn.hide (); menyimpan tampilan asli dalam elemen itu sendiri ketika bersembunyi (misalnya sebagai atribut atau dalam $. Data ()); dan kemudian menerapkannya kembali saat ditampilkan.

Juga, menggunakan css penting! mungkin tidak akan berfungsi di sini - karena menetapkan inline gaya biasanya lebih kuat daripada aturan lainnya

Yarg
sumber
0

. .Let Yang terbaik itu orang tua display :inline-blockatau tambahkan orang tua divapa yang hanya dimiliki CSS display :inline-block.

wuball
sumber
-5

Cara terbaik adalah menambahkan sufiks penting ke pemilih.

Contoh:

 #selector{
     display: inline-block !important;                   
}
yuiwer
sumber
3
tidakkah ini mencegah .hide ()?
Kaan Soral
! Penting hanya diperlukan dalam kasus tepi ketika tidak ada pilihan lain. Bukan cara yang tepat untuk mendekati masalah ini menurut saya ketika itu bisa diperbaiki dengan kode jQuery yang lebih baik.
Brandon
6
Yang penting untuk diingat !importantadalah bahwa penting untuk tidak menggunakannya.
user1728278