Làm cách nào để thêm display: inline-block trong hàm jQuery show ()?

Tôi có một số mã như thế này:

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

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

Các chức năng hiển thị thêm display:block. Nhưng tôi muốn thêm display:inline-blockthay vì chặn.

Thay vì show, hãy thử sử dụng CSS để ẩn và hiển thị nội dung.

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

Đặt thuộc tính CSS sau khi bạn đã sử dụng .show()sẽ hoạt động. Có thể bạn đang nhắm mục tiêu sai phần tử trên trang HTML của bạn.

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

Nhưng nếu bạn không sử dụng bất kỳ hiệu ứng .show(), .hide()nào thì tại sao bạn không thiết lập các thuộc tính CSS đó theo cách thủ công như sau:

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

Sử dụng css () ngay sau show () hoặc fadeIn () như thế này:

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

Tôi đã làm điều đó

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

hoạt động như một lá bùa.

Giải pháp của Razz sẽ hoạt động cho các phương thức .hide()và .show()nhưng không hoạt động cho .toggle()phương thức.

Tùy thuộc vào kịch bản, có một lớp css .inline_block { display: inline-block; }và gọi $(element).toggleClass('inline_block')giải quyết vấn đề cho tôi.

Bạn có thể sử dụng animate insted của chương trình / ẩn

Một cái gì đó như thế này:

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

thử cái này:

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

Tôi nghĩ rằng bạn muốn cả hoạt hình và đặt thuộc tính hiển thị ở cuối. Trong trường hợp đó, bạn nên sử dụng show()gọi lại như dưới đây

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

Bằng cách này bạn sẽ đạt được cả hai kết quả.

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

thực tế jQuery chỉ đơn giản là xóa giá trị của thuộc tính 'display' và không đặt nó thành 'block' (xem triển khai bên trong của 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";
        }
    }

Xin lưu ý rằng bạn có thể ghi đè $ .fn.show () / $. Fn. Leather (); lưu trữ hiển thị ban đầu trong chính phần tử khi ẩn (ví dụ như một thuộc tính hoặc trong $ .data ()); và sau đó áp dụng nó một lần nữa khi hiển thị.

Ngoài ra, sử dụng css quan trọng! có thể sẽ không hoạt động ở đây - vì thiết lập một kiểu nội tuyến thường mạnh hơn bất kỳ quy tắc nào khác

Tốt nhất .let nó là cha mẹ display :inline-blockhoặc thêm cha mẹ divnhững gì CSS chỉ có display :inline-block.

Cách tốt nhất là thêm hậu tố quan trọng vào bộ chọn.

Thí dụ:

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