Wie füge ich display: inline-block in einer jQuery show () Funktion hinzu?

157

Ich habe einen Code wie diesen:

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

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

Die Show-Funktion fügt hinzu display:block. Aber ich möchte display:inline-blockanstelle von Block hinzufügen .

Giri
quelle
1
Sie müssen einige weitere Details angeben. Es funktioniert für mich in einem kurzen Test: jsfiddle.net/DD3Sf .
Gijs
@gijs Sorry, es funktioniert jetzt. Ich denke, es ist ein Cache-Problem. Vielen Dank für Ihre Zeit
Giri

Antworten:

208

showVersuchen Sie stattdessen , CSS zu verwenden, um den Inhalt auszublenden und anzuzeigen.

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");
}
Razz
quelle
91
Dies mag offensichtlich erscheinen, aber wenn Sie immer noch den Timing-Aspekt von show( $("#id").show(500)) nutzen möchten , fügen Sie einfach die cssFunktion hinzu:$("#id").show(500).css("display", "inline-block");
BenR
2
Ich würde noch einen Schritt weiter gehen und mich um das Ausblenden / Anzeigen mit CSS-Klassen kümmern, nicht mit jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); In der CSS:.hidden { display: none !important }
Joe Maffei
10
Dies ist zwar die akzeptierte Antwort, spiegelt jedoch nicht die Angaben in jquery docs wider : Dies entspricht in etwa dem Aufruf von .css ("display", "block"), mit der Ausnahme, dass die display-Eigenschaft auf den ursprünglichen Wert zurückgesetzt wird. Wenn ein Element den Anzeigewert Inline hat, dann ausgeblendet und angezeigt wird, wird es erneut inline angezeigt. Um einen Standardwert zu haben display, müssen Sie eine Klasse in Ihrem CSS hinzufügen, indem Sie display:inline-block;dann aufrufen hide()und show()die ID des Elements verwenden. Dies ist sauberer und vorhersehbarer Code und einfacher zu stylen.
Abdullah Adeeb
1
@AbdullahAdeeb das Problem ist, dass Sie hide()von js beim Laden der Seite benötigen würden . Einstellung #element{display:inline-block;display:none;}geht nicht. Ich denke, die sauberste Lösung ist $('#element').fadeIn().addClass('displaytype');- besser als die Antwort oben, weil Sie verschiedene .displaytypes in CSS setzen können und eine Anzeigefunktion in js haben. Siehe meine Antwort hier: stackoverflow.com/questions/1091322/…
Fanky
35

Das Festlegen der CSS-Eigenschaft nach der Verwendung .show()sollte funktionieren. Möglicherweise zielen Sie auf das falsche Element auf Ihrer HTML-Seite.

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

Wenn Sie jedoch keine Effekte verwenden, .show(), .hide()warum setzen Sie diese CSS-Eigenschaften nicht manuell wie folgt?

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');
mas-designs
quelle
3
Beachten Sie, dass jquery show / hide / toggle die vorherigen Anzeigewerte wiederherstellt. Wenn Sie es also mit jquery ausblenden, funktioniert der Aufruf von show.
Curtis Yallop
"Das Festlegen der CSS-Eigenschaft, nachdem Sie .show () verwendet haben, sollte funktionieren." Was bringt es, show () zu verwenden, wenn Sie das CSS trotzdem manuell aktualisieren möchten?
JSON
9

Verwenden Sie css () direkt nach show () oder fadeIn () wie folgt:

$('div.className').fadeIn().css('display', 'inline-block');
Yura Loginov
quelle
5

Ich habe das gemacht

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

klappt wunderbar.

user2204545
quelle
7
Ist das eine Antwort oder eine Bestätigung?
NREZ
5

Razz 'Lösung würde für die .hide()und .show()Methoden funktionieren, aber nicht für die.toggle() Methode.

Je nach Szenario löst eine CSS-Klasse .inline_block { display: inline-block; }und ein Aufruf $(element).toggleClass('inline_block')das Problem für mich.

user968903
quelle
2

Sie können animieren insted of show / hide verwenden

Etwas wie das:

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");
}
Narek
quelle
2

Versuche dies:

$('#foo').show(0).css('display','inline-block');
Carlos
quelle
Das show()ist sinnlos. Dies ist das gleiche wie$('#foo').css('display','inline-block');
Liam
@ Liam Nicht sinnlos. Sie können die 0 ändern, um sie zu vereinfachen, oder diese ändern, um Zugriff auf andere eindeutige showOptionen zu erhalten.
JSideris
2

Ich denke, Sie möchten sowohl die Animation als auch die Anzeigeeigenschaft am Ende festlegen. In diesem Fall verwenden Sie den show()Rückruf besser wie unten gezeigt

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

Auf diese Weise erzielen Sie beide Ergebnisse.

Reza
quelle
Dies ist nicht korrekt. Der inline-blockModus wird erst angezeigt, nachdem die gesamte Animation ausgeführt wurde. Das heißt, es würde zwischen blockund inline-blocknach den 400ms "knallen" .
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>
Jon
quelle
0

Tatsächlich löscht jQuery einfach den Wert der Eigenschaft 'display' und setzt ihn nicht auf 'block' (siehe interne Implementierung von 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";
        }
    }

Bitte beachten Sie, dass Sie $ .fn.show () / $. Fn.hide () überschreiben können; Speichern der Originalanzeige im Element selbst beim Ausblenden (z. B. als Attribut oder in $ .data ()); und dann beim Anzeigen wieder anwenden.

Auch mit CSS wichtig! wird hier wahrscheinlich nicht funktionieren - da das Festlegen eines Inline-Stils normalerweise stärker ist als jede andere Regel

Yarg
quelle
0

Das beste .let ist übergeordnet display :inline-blockoder fügt ein übergeordnetes Element hinzu, divdas nur über CSS verfügt display :inline-block.

Wuball
quelle
-5

Am besten fügen Sie dem Selektor ein wichtiges Suffix hinzu.

Beispiel:

 #selector{
     display: inline-block !important;                   
}
yuiwer
quelle
3
Verhindert dies nicht .hide ()?
Kaan Soral
! wichtig ist nur in Randfällen erforderlich, in denen es keine andere Option gibt. Meiner Meinung nach nicht der richtige Weg, um dieses Problem anzugehen, wenn es mit besserem jQuery-Code behoben werden kann.
Brandon
6
Die wichtige Sache zu erinnern !importantist , dass es wichtig nicht zu benutzen.
user1728278