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

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.

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

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

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

$('div.className').fadeIn().css('display', 'inline-block');

Saya melakukan itu

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

bekerja seperti pesona.

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.

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

coba ini:

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

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.

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

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

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

Cara terbaik adalah menambahkan sufiks penting ke pemilih.

Contoh:

 #selector{
     display: inline-block !important;                   
}