Як додати display: вбудований блок у функції 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');
}

працює як шарм.

Рішення Razz працювало б для методів .hide()та .show()методів, але не було б для .toggle()методу.

Залежно від сценарію, наявність класу css .inline_block { display: inline-block; }та виклику $(element).toggleClass('inline_block')вирішує проблему для мене.

Ви можете використовувати анімацію, яку вводити в показ / ховати

Щось на зразок цього:

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