webentwicklung-frage-antwort-db.com.de

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

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 display: block hinzu. Ich möchte aber display hinzufügen: inline-block statt block.

jqueryshow-hide
149
Giri

Versuchen Sie, anstelle von show CSS zu verwenden, um den Inhalt ein- und auszublenden.

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");
}
195
Razz

Das Festlegen der CSS-Eigenschaft nach der Verwendung von .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 von .show(), .hide() verwenden, können Sie diese CSS-Eigenschaften wie folgt manuell festlegen:

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

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

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

Ich habe das gemacht

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

klappt wunderbar.

5
user2204545

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

Abhängig vom Szenario ist das Problem für mich gelöst, wenn Sie eine CSS-Klasse .inline_block { display: inline-block; } Haben und $(element).toggleClass('inline_block') aufrufen.

5
user968903

Sie können animieren anstelle von 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");
}
2
Narek

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

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

Auf diese Weise erzielen Sie beide Ergebnisse.

2
Reza

versuche dies:

$('#foo').show(0).css('display','inline-block');
2
Carlos
<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>
1
Jon

tatsächlich löscht jQuery einfach den Wert der 'display'-Eigenschaft 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 ursprünglichen Anzeige im Element selbst beim Ausblenden (z. B. als Attribut oder in $ .data ()); und beim Anzeigen erneut anwenden.

Die Verwendung von css important! funktioniert hier wahrscheinlich nicht, da das Festlegen eines Inline-Stils normalerweise stärker ist als jede andere Regel

0
yarg

Die beste .let es ist Eltern display :inline-block oder füge ein übergeordnetes div hinzu, was CSS nur hat display :inline-block.

0
wuball