¿Cómo agregar display: inline-block en una función jQuery show ()?


158

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

La función show agrega display:block. Pero me gustaría agregar en display:inline-blocklugar de bloquear.


1
Deberá proporcionar algunos detalles más. A mí me funciona en una prueba rápida: jsfiddle.net/DD3Sf .
Gijs

@gijs Lo siento, está funcionando ahora. Creo que es un problema de caché. Gracias por su tiempo
Giri

Respuestas:


209

En lugar de show, intente usar CSS para ocultar y mostrar el contenido.

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
Esto puede parecer obvio, pero si aún desea utilizar el aspecto de sincronización de show( $("#id").show(500)), simplemente agregue la cssfunción:$("#id").show(500).css("display", "inline-block");
BenR

2
Daría un paso más allá y me ocuparía de todo lo que se esconde / muestra usando clases CSS, no jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); En el CSS:.hidden { display: none !important }
Joe Maffei

10
Aunque esta es la respuesta aceptada, pero no refleja lo que se dice en jquery docs : esto es más o menos equivalente a llamar a .css ("display", "block"), excepto que la propiedad de visualización se restaura a lo que era inicialmente. Si un elemento tiene un valor de visualización en línea, entonces se oculta y se muestra, una vez más se mostrará en línea. Entonces, para tener un valor predeterminado display, debe agregar una clase en su css con display:inline-block;luego llamar hide()y show()usar la identificación del elemento. Este es un código más limpio y predecible y más fácil de diseñar.
Abdullah Adeeb

1
@AbdullahAdeeb el problema es que necesitarías hacerlo hide()por js en la carga de la página. El ajuste #element{display:inline-block;display:none;}no funciona. Creo que la solución más limpia es $('#element').fadeIn().addClass('displaytype');: mejor que la respuesta anterior, porque puede establecer diferentes .displaytypes en css y tener una función que muestre en js. Vea mi respuesta aquí: stackoverflow.com/questions/1091322/…
Fanky el

36

Establecer la propiedad CSS después de haber usado .show()debería funcionar. Quizás esté apuntando al elemento incorrecto en su página HTML.

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

Pero si no está utilizando ningún efecto de .show(), .hide()por qué no establece esas propiedades CSS manualmente como:

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

3
Tenga en cuenta que jquery show / hide / toggle restaura los valores de visualización anteriores. Entonces, si lo ocultas con jquery, llamar a show funcionará.
Curtis Yallop

"Establecer la propiedad CSS después de haber usado .show () debería funcionar". ¿Cuál es el punto de usar show () si solo vas a actualizar manualmente el CSS?
JSON

9

Use css () justo después de show () o fadeIn () así:

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

5

yo lo hice

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

Funciona de maravilla.


77
¿Es eso una respuesta o un reconocimiento ...?
NREZ

5

La solución de Razz funcionaría para los métodos .hide()y .show()pero no funcionaría para el .toggle()método.

Dependiendo del escenario, tener una clase css .inline_block { display: inline-block; }y llamar me $(element).toggleClass('inline_block')resuelve el problema.


2

Puedes usar animar insted de show / hide

Algo como esto:

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

prueba esto:

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

El show()en esto no tiene sentido. Esto es lo mismo que$('#foo').css('display','inline-block');
Liam

@Liam No tiene sentido. Puede cambiar el 0 para facilitar o modificar esto para obtener acceso a otras showopciones únicas .
JSideris

2

Creo que desea tanto la animación como establecer la propiedad de visualización al final. En ese caso, es mejor que use la show()devolución de llamada como se muestra a continuación

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

De esta forma logrará los dos resultados.


Esto no es correcto, terminarías con el inline-blockmodo solo después de que se ejecutara toda la animación. Eso significa que "estallaría" entre blocky inline-blockdespués de los 400 ms.
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

en realidad, jQuery simplemente borra el valor de la propiedad 'display' y no lo establece en 'block' (vea la implementación 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";
        }
    }

Tenga en cuenta que puede anular $ .fn.show () / $. Fn.hide (); almacenar la visualización original en el elemento en sí mismo cuando se oculta (por ejemplo, como un atributo o en $ .data ()); y luego aplicarlo nuevamente cuando se muestra.

Además, el uso de CSS importante! probablemente no funcionará aquí, ya que establecer un estilo en línea suele ser más fuerte que cualquier otra regla


0

El mejor .let es padre display :inline-blocko agrega un padre divque CSS solo tiene display :inline-block.


-5

La mejor manera es agregar un sufijo importante al selector.

Ejemplo:

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

3
¿Esto no impide .hide ()?
Kaan Soral

! important solo es necesario en casos extremos cuando no hay otra opción. No es la forma correcta de abordar este problema en mi opinión cuando se puede solucionar con un mejor código jQuery.
Brandon el

66
Lo importante para recordar !importantes que es importante no usarlo.
user1728278
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.