วิธีเพิ่ม display: inline-block ในฟังก์ชั่น jQuery show ()

ฉันมีรหัสเช่นนี้:

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

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

display:blockฟังก์ชั่นการแสดงเพิ่ม แต่ฉันต้องการเพิ่มdisplay:inline-blockแทนการบล็อก

แทนที่จะshowพยายามใช้ CSS เพื่อซ่อนและแสดงเนื้อหา

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

การตั้งค่าคุณสมบัติ CSS หลังจากที่คุณใช้งาน.show()ควรจะทำงาน บางทีคุณกำลังกำหนดเป้าหมายองค์ประกอบที่ไม่ถูกต้องในหน้า HTML ของคุณ

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

แต่ถ้าคุณไม่ได้ใช้เอฟเฟกต์ใด ๆ ของ.show(), .hide()สาเหตุที่คุณไม่ตั้งค่าคุณสมบัติ CSS เหล่านั้นด้วยตนเองเช่น:

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

ใช้ css () หลังจาก show () หรือ fadeIn () เช่นนี้:

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

ฉันทำอย่างนั้น

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

ทำงานเหมือนจับใจ

วิธีการแก้ปัญหาสัพยอกจะทำงานให้.hide()และ.show()วิธีการ แต่จะไม่ทำงานสำหรับ.toggle()วิธีการ

ขึ้นอยู่กับสถานการณ์การมีคลาส css .inline_block { display: inline-block; }และการโทร$(element).toggleClass('inline_block')แก้ปัญหาให้ฉัน

คุณสามารถใช้ชีวิต insted ของการแสดง / ซ่อน

บางสิ่งเช่นนี้

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

ลองนี้:

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

ฉันคิดว่าคุณต้องการทั้งภาพเคลื่อนไหวและการตั้งค่าคุณสมบัติการแสดงผลในตอนท้าย ในกรณีนี้คุณควรใช้การshow()ติดต่อกลับตามที่แสดงด้านล่าง

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

วิธีนี้คุณจะได้ผลลัพธ์ทั้งสองแบบ

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

จริงๆแล้ว jQuery เพียงแค่ล้างค่าของคุณสมบัติ 'display' และไม่ได้ตั้งค่าเป็น 'block' (ดูการใช้งานภายในของ 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";
        }
    }

โปรดทราบว่าคุณสามารถแทนที่ $ .fn.show () / $. fn.hide (); การจัดเก็บจอแสดงผลดั้งเดิมในองค์ประกอบตัวเองเมื่อซ่อน (เช่นเป็นคุณลักษณะหรือใน $ .data ()) แล้วนำกลับมาใช้อีกครั้งเมื่อแสดง

นอกจากนี้การใช้ CSS สำคัญ! อาจไม่ทำงานที่นี่เนื่องจากการตั้งค่าสไตล์อินไลน์มักจะแข็งแกร่งกว่ากฎอื่น ๆ

ที่ดีที่สุดของมัน .let ของผู้ปกครองdisplay :inline-blockหรือเพิ่มผู้ปกครองdivสิ่ง CSS display :inline-blockมีเพียง

วิธีที่ดีที่สุดคือการเพิ่มคำต่อท้ายที่สำคัญให้กับตัวเลือก

ตัวอย่าง:

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