Как добавить display: inline-block в функцию jQuery show ()?

158

У меня есть такой код:

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вместо блока.

Гири
источник
1
Вам нужно будет предоставить некоторые подробности. Это работает для меня в быстром тесте: jsfiddle.net/DD3Sf .
Gijs
@gijs Извините, это работает сейчас. Я думаю, что это какая-то проблема с кешем. Спасибо за ваше время
Гири

Ответы:

209

Вместо этого 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");
}
малина
источник
92
Это может показаться очевидным, но если вы все еще хотите использовать синхронизирующий аспект show( $("#id").show(500)), просто добавьте cssк нему функцию:$("#id").show(500).css("display", "inline-block");
BenR
2
Я бы сделал еще один шаг и позаботился о том, чтобы скрыть / показать с помощью CSS-классов, а не jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); В CSS:.hidden { display: none !important }
Джо Маффеи
10
Несмотря на то, что это принятый ответ, но он не отражает того, что указано в jquery docs : это примерно эквивалентно вызову .css ("display", "block"), за исключением того, что свойство display восстанавливается в том виде, в котором оно было изначально. Если элемент имеет отображаемое значение inline, то он скрыт и показан, он снова будет отображаться inline. Таким образом, чтобы иметь значение по умолчанию, displayвам нужно добавить класс в ваш css с display:inline-block;последующим вызовом hide()и show()использованием идентификатора элемента. Это более чистый и более предсказуемый код, который легче стилизовать.
Абдулла Адиб
1
@AbdullahAdeeb проблема в том, что вам потребуется hide()js при загрузке страницы. Установка #element{display:inline-block;display:none;}не делает. Я думаю, что самое чистое решение $('#element').fadeIn().addClass('displaytype');- лучше, чем ответ выше, потому что вы можете установить разные .displaytypes в css и иметь одну функцию показа в js. Смотрите мой ответ здесь: stackoverflow.com/questions/1091322/…
Фанки
36

Установка свойства CSS после использования .show()должна работать. Возможно, вы нацелены не на тот элемент HTML-страницы.

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

Но если вы не используете никаких эффектов, .show(), .hide()почему вы не устанавливаете эти свойства CSS вручную, например:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');
MAS-проекты
источник
3
Обратите внимание, что jquery show / hide / toggle восстанавливает предыдущие отображаемые значения. Так что если вы скрываете это с помощью jquery, вызов show будет работать.
Кертис Яллоп
«Установка свойства CSS после того, как вы использовали .show (), должна работать». Какой смысл использовать show (), если вы все равно собираетесь вручную обновить css?
JSON
9

Используйте css () сразу после show () или fadeIn () следующим образом:

$('div.className').fadeIn().css('display', 'inline-block');
Юра Логинов
источник
5

я это сделал

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

работает как шарм.

user2204545
источник
7
Это ответ или подтверждение ..?
NREZ
5

Решение малина была бы работать для .hide()и .show()методов , но не будет работать для .toggle()метода.

В зависимости от сценария, наличие класса CSS .inline_block { display: inline-block; }и вызова $(element).toggleClass('inline_block')решает проблему для меня.

user968903
источник
2

Вы можете использовать анимированный insted of show / hide

Что-то вроде этого:

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");
}
Нарек
источник
2

попробуй это:

$('#foo').show(0).css('display','inline-block');
Carlos
источник
В show()этом нет смысла. Это так же, как$('#foo').css('display','inline-block');
Лиам
@ Лиам Не бессмысленно. Вы можете изменить 0 для упрощения или изменить это, чтобы получить доступ к другим уникальным showопциям.
JSideris
2

Я думаю, что вы хотите и анимацию, и установить свойство отображения в конце. В этом случае вам лучше использовать show()обратный вызов, как показано ниже

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

Таким образом, вы добьетесь обоих результатов.

Реза
источник
Это не правильно, вы можете получить inline-blockрежим только после запуска всей анимации. Это означает, что он будет « всплывать » между blockи inline-blockпосле 400 мс.
Алексис Вилке
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>
Джон
источник
0

на самом деле 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 важно! вероятно, здесь не сработает - поскольку установка стиля в строке обычно сильнее любого другого правила

yarg
источник
0

Лучший .let это родитель display :inline-blockили добавить родителя из divтого, что есть только у CSS display :inline-block.

wuball
источник
-5

Лучший способ - добавить! Важный суффикс к селектору.

Пример:

 #selector{
     display: inline-block !important;                   
}
yuiwer
источник
3
это не мешает .hide ()?
Каан Сорал
! важно только в крайних случаях, когда нет другой опции. На мой взгляд, это неправильный подход к этой проблеме, когда ее можно исправить с помощью лучшего кода jQuery.
Брэндон
6
Важно помнить о !importantтом , что это важно , чтобы не использовать его.
user1728278