Como adicionar display: inline-block em uma função jQuery show ()?


158

Eu tenho algum código como este:

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

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

A função show adiciona display:block. Mas eu gostaria de adicionar em display:inline-blockvez de bloquear.


1
Você precisará fornecer mais alguns detalhes. Funciona para mim em um teste rápido: jsfiddle.net/DD3Sf .
Gijs

@gijs Desculpe, está funcionando agora. Eu acho que é algum problema de cache. Obrigado pelo seu tempo
Giri

Respostas:


209

Em vez de show, tente usar CSS para ocultar e mostrar o conteúdo.

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
Isso pode parecer óbvio, mas se você ainda quiser utilizar o aspecto tempo de show( $("#id").show(500)), basta acrescentar a cssfunção a ele:$("#id").show(500).css("display", "inline-block");
BenR

2
Eu daria um passo adiante e cuidaria de toda a ocultação / exibição usando classes CSS, não jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); No CSS:.hidden { display: none !important }
Joe Maffei

10
Mesmo que essa seja a resposta aceita, mas não reflete o que é declarado no jquery docs : Isso é aproximadamente equivalente a chamar .css ("display", "block"), exceto que a propriedade display é restaurada para o que era inicialmente. Se um elemento tiver um valor de exibição embutido, então estiver oculto e exibido, será exibido novamente embutido. Portanto, para ter um padrão, displayvocê precisa adicionar uma classe no seu css e display:inline-block;depois chamar hide()e show()usar o ID do elemento. Este é um código mais limpo, previsível e mais fácil de estilizar.
Abdullah Adeeb

1
@AbdullahAdeeb o problema é que você precisaria hide()js no carregamento da página. A configuração #element{display:inline-block;display:none;}não funciona. Eu acho que a solução mais limpa é $('#element').fadeIn().addClass('displaytype');- melhor do que responder acima, porque você pode definir .displaytypes diferentes em css e ter uma função mostrando em js. Veja minha resposta aqui: stackoverflow.com/questions/1091322/…
Fanky

36

Definir a propriedade CSS depois de ter usado .show()deve funcionar. Talvez você esteja direcionando o elemento errado na sua página HTML.

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

Mas se você não estiver usando nenhum efeito, .show(), .hide()por que não definir essas propriedades CSS manualmente, como:

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

3
Observe que o jquery show / hide / toggle restaura os valores de exibição anteriores. Portanto, se você o ocultar com jquery, chamar show irá funcionar.
Curtis Yallop

"Definir a propriedade CSS depois de usar .show () deve funcionar." Qual é o objetivo de usar show () se você está apenas atualizando manualmente o css?
JSON

9

Use css () logo após show () ou fadeIn () assim:

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

5

eu fiz isso

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

Funciona como um encanto.


7
Isso é uma resposta ou um reconhecimento ..?
NREZ 21/08/2013

5

A solução de Razz funcionaria para os métodos .hide()e .show(), mas não funcionaria para o .toggle()método.

Dependendo do cenário, ter uma classe css .inline_block { display: inline-block; }e chamar $(element).toggleClass('inline_block')resolve o problema para mim.


2

Você pode usar insted animado de mostrar / ocultar

Algo assim:

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

tente isto:

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

O show()nisso é inútil. É o mesmo que:$('#foo').css('display','inline-block');
Liam

@ Liam Não faz sentido. Você pode alterar o 0 para facilitar ou modificá-lo para obter acesso a outras showopções exclusivas .
JSideris

2

Eu acho que você quer a animação e definir a propriedade display no final. Nesse caso, é melhor usar o show()retorno de chamada, como mostrado abaixo

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

Dessa forma, você alcançará os dois resultados.


Isso não está correto, você acabaria com o inline-blockmodo somente depois que toda a animação fosse executada. Isso significa que ele "pop" entre blocke inline-blockapós os 400ms.
Alexis Wilke #

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

na verdade, o jQuery simplesmente limpa o valor da propriedade 'display' e não o define como 'block' (consulte a implementação interna de 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";
        }
    }

Observe que você pode substituir $ .fn.show () / $. Fn.hide (); armazenar a exibição original no próprio elemento ao ocultar (por exemplo, como um atributo ou no $ .data ()); e depois aplicá-lo novamente ao mostrar.

Além disso, usando css importante! provavelmente não funcionará aqui - já que definir um estilo embutido geralmente é mais forte do que qualquer outra regra


0

O melhor .let é pai display :inline-blockou adicione um pai o divque apenas o CSS possui display :inline-block.


-5

A melhor maneira é adicionar um sufixo importante ao seletor.

Exemplo:

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

3
isso não impede .hide ()?
precisa saber é o seguinte

! important só é necessário em casos extremos quando não há outra opção. Não é o caminho certo para abordar esse problema na minha opinião, quando ele pode ser corrigido com um melhor código jQuery.
Brandon

6
O importante é lembrar !importantque é importante não usá-lo.
user1728278
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.