Come aggiungere display: inline-block in una funzione jQuery show ()?


158

Ho un codice come questo:

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

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

La funzione show aggiunge display:block. Ma vorrei aggiungere display:inline-blockinvece di bloccare.


1
Dovrai fornire ulteriori dettagli. Funziona per me in un test rapido: jsfiddle.net/DD3Sf .
Gijs,

@gijs Mi dispiace che funzioni ora. Penso che sia qualche problema di cache. Grazie per il tuo tempo
Giri,

Risposte:


209

Invece di show, prova a usare CSS per nascondere e mostrare il contenuto.

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
Questo può sembrare ovvio, ma se vuoi ancora utilizzare l'aspetto del timing di show( $("#id").show(500)), aggiungi semplicemente la cssfunzione ad esso:$("#id").show(500).css("display", "inline-block");
BenR

2
Farei un ulteriore passo avanti e mi occuperei di nascondere / mostrare usando le classi CSS, non jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); Nel CSS:.hidden { display: none !important }
Joe Maffei il

10
Anche se questa è la risposta accettata ma non riflette ciò che viene affermato nei documenti jquery : questo equivale all'incirca alla chiamata .css ("display", "block"), tranne per il fatto che la proprietà display viene ripristinata a qualunque cosa fosse inizialmente. Se un elemento ha un valore di visualizzazione inline, quindi viene nascosto e mostrato, verrà nuovamente visualizzato in linea. Quindi per avere un valore predefinito displaydevi aggiungere una classe nel tuo css con display:inline-block;poi call hide()e show()usando l'id dell'elemento. Questo è un codice più pulito e prevedibile e più semplice da definire.
Abdullah Adeeb,

1
@AbdullahAdeeb il problema è che dovresti farlo hide()con js al caricamento della pagina. L'impostazione #element{display:inline-block;display:none;}non funziona. Penso che la soluzione più pulita sia $('#element').fadeIn().addClass('displaytype');- meglio della risposta sopra, perché puoi impostare diversi .displaytypes in css e avere una funzione di visualizzazione in js. Vedere la mia risposta qui: stackoverflow.com/questions/1091322/...
Fanky

36

L'impostazione della proprietà CSS dopo averla utilizzata .show()dovrebbe funzionare. Forse stai prendendo di mira l'elemento sbagliato nella tua pagina HTML.

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

Ma se non stai usando alcun effetto del .show(), .hide()perché non imposti manualmente quelle proprietà CSS come:

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

3
Nota che jquery show / hide / toggle ripristina i valori di visualizzazione precedenti. Quindi, se lo nascondi con jquery, chiamare show funzionerà.
Curtis Yallop,

"L'impostazione della proprietà CSS dopo aver usato .show () dovrebbe funzionare." Qual è il punto di usare show () se hai intenzione di aggiornare manualmente i CSS comunque?
JSON,

9

Usa css () subito dopo show () o fadeIn () in questo modo:

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

5

l'ho fatto

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

funziona come un fascino.


7
È una risposta o un riconoscimento ...?
NREZ,

5

La soluzione di Razz avrebbe funzionato per i metodi .hide()e .show()ma non per il .toggle()metodo.

A seconda dello scenario, avere una classe CSS .inline_block { display: inline-block; }e la chiamata $(element).toggleClass('inline_block')risolve il problema per me.


2

È possibile utilizzare l' istanza animata di show / hide

Qualcosa come questo:

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

prova questo:

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

Il show()in questo è inutile. Questo è lo stesso di$('#foo').css('display','inline-block');
Liam

@Liam Non ha senso. È possibile modificare lo 0 per semplificare o modificarlo per ottenere l'accesso ad altre showopzioni uniche .
JSideris,

2

Penso che tu voglia sia l'animazione che impostare la proprietà display alla fine. In tal caso è meglio utilizzare la show()richiamata come mostrato di seguito

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

In questo modo otterrai entrambi i risultati.


Questo non è corretto, finiresti con la inline-blockmodalità solo dopo l'esecuzione dell'intera animazione. Ciò significa che sarebbe "pop" tra blocke inline-blockdopo i 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

in realtà jQuery cancella semplicemente il valore della proprietà 'display' e non lo imposta su 'block' (vedi implementazione interna di 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";
        }
    }

Si noti che è possibile ignorare $ .fn.show () / $. Fn.hide (); memorizzare la visualizzazione originale nell'elemento stesso quando si nasconde (ad esempio come attributo o in $ .data ()); e quindi applicarlo nuovamente quando viene mostrato.

Inoltre, usando CSS è importante! probabilmente non funzionerà qui, poiché l'impostazione di uno stile in linea è generalmente più forte di qualsiasi altra regola


0

Il miglior .let è genitore display :inline-blocko aggiungi un genitore divsolo ciò che CSS ha display :inline-block.


-5

Il modo migliore è aggiungere! Suffisso importante al selettore.

Esempio:

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

3
questo non impedisce .hide ()?
Kaan Soral

! important è necessario solo nei casi limite quando non c'è altra opzione. Secondo me non è il modo giusto di affrontare questo problema quando può essere risolto con un codice jQuery migliore.
Brandon,

6
La cosa importante da ricordare !importantè che è importante non usarlo.
user1728278
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.