jQuery .show () - eine flex-box

Habe ich ein element mit einem flexbox -

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

nach verstecken es und zeigen es, es wird versaut.

$('#myFlexbox').show();

nun das element verfügt über ein display-block anstelle von flex.

<ul id="myFlexbox" style="display: block;">

Wie kann ich das nutzen .verbergen und .Karte mit flexboxes?

InformationsquelleAutor Buffalo | 2016-07-20
  1. 53

    Den show() fügt display:block als Standard für div. Sie können ändern Sie die display zu flex mit jQuery css():

    $('#myFlexbox').css('display', 'flex');
    • brauchen nicht die .show().
    • Es funktioniert in Safari für mich.
    • Dies schafft eine Feste Verbindung zwischen dem JS und css. Nun, wenn Sie sich entscheiden, ändern Sie Ihre css, so dass #myFlexbox ist nicht mehr eine flex, dein JS ist falsch. Ich bevorzuge mxlse Antwort.
    InformationsquelleAutor guizo
  2. 14

    JQuery .show() weiß nicht, über Ihre display: flex; (nicht flexbox). Stattdessen versuchen Sie, hinzufügen und entfernen Sie ein Versteck Klasse.

    CSS:

    #myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

    JS:

    $('#myFlexbox').addClass('hide');
$('#myFlexbox').removeClass('hide');

    https://jsfiddle.net/p2msLqtt/

    Sonst müssen Sie ausführen Ihre JS, nachdem die CSS vollständig geladen und das DOM bereit ist, Schätze ich, heißt wie:

    <html>
  <head>
    <!-- CSS -->
  </head>
  <body>
    <!-- BODY PART -->
    <!-- SCRIPT TO HIDE AND SHOW -->
  </body>
</html>

    Aktualisiert die fiddle und setzen Sie die Ausführung von Javascript zu domready - es funktioniert:

    https://jsfiddle.net/p2msLqtt/1/

    InformationsquelleAutor mxlse
  3. 3

    Sollten Sie wickeln Sie Ihre display: flex Inhalte mit einem element.

    <div id="flexWrapper">
    <ul id="myFlexbox"></ul>
</div>

    binden Sie Ihr javascript ein - /ausblenden auf '#flexWrapper'

    InformationsquelleAutor ecoble
  4. 3

    Da andere Antworten nicht berücksichtigt, für die Möglichkeit, dass du vielleicht die duration argument...

    Kurze Antwort: Verwenden .ausblenden für das verstecken der Wert und das sollte nicht passieren.

    Eine kleine Erklärung:

    Werden die übereinstimmenden Elemente werden sofort ausgeblendet, keine animation. Dies entspricht etwa der Aufruf .css( "display", "none" ), außer, dass der Wert der display-Eigenschaft gespeichert ist, die jQuery-Daten-cache, so dass die Anzeige kann später wieder auf den ursprünglichen Wert. Wenn ein element hat eine Anzeige Wert flex und versteckt sich dann gezeigt, es wird wieder angezeigt flex.

    Aus Dokumentation, Geändert 'inline' zu 'flex' zu passen, die contenxt!

    So jQuery weiß, was Sie verbergen! Wenn Sie verborgen haben es mit .ausblenden ist, Und Sie weiß, wie Sie Sie wieder einblenden, mit der rechten display-Wert.

    • Das ist gut, aber wie gehst du mit "blinkt", die auftreten können. Da die Seite geladen wird mit dem element sichtbar ist es auf dem Bildschirm für eine Sekunde, bevor er "versteckt". In der Vergangenheit, die ist, warum ich würde immer die Standard-CSS display:none und verwenden Sie dann die .show() Methode, um es zu bringen in den Blick.
    • Hmmm, die erste Sache, die kommt sich zu kümmern, ist nur einen wrapper verwenden, der mit display:none-Wert, bis die Seite geladen wird...
    InformationsquelleAutor aliqandil
  5. 3

    verwenden Sie einfach

    .class{display: none}

.class[style*='display: block']{
    display: flex !important;
}

    wenn jquery hinzufügen styl css-attribut angewendet werden, die perfekt funktioniert auf Chrome und Mozilla

    InformationsquelleAutor nikolay
  6. 2

    Den class Lösung funktioniert, ja.
    Hier ist ein anderer Ansatz, die ich kam mit:

    Javascript-Funktion

    function showFlex(element) {

    var flexContainer = document.getElementById(element);

    flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}

    Zu verwenden:

    showFlex( "yourIDhere" );

    Beachten Sie, dass die ID muss nicht die # wenn Sie die Funktion aufrufen.

    Beispiel:

    https://codepen.io/florantara/pen/aLeyYb/

    InformationsquelleAutor fanta
  7. 0

    Die Idee ist, erstellen Sie eine benutzerdefinierte Funktion showFlex() ähnlich wie jQuery show() und rufen Sie es mit dem element, das müssen die display:flex; Eigenschaft.

    jQuery-Lösung

    $.fn.showFlex = function() {
  this.css('display','flex');
}

    $('#myFlexbox').showFlex();

    JavaScript-Lösung

    Object.prototype.showFlex = function() {
    this.style.display = 'flex';
}

    document.getElementById('myFlexbox').showFlex();

    Hoffe, das hilft.

    • jQuery-Lösung sollte $.fn.showFlex = function(){ this.css({'display':'flex'}); }
    • Vielen Dank für diesen Hinweis. Bearbeitet die Antwort.
    InformationsquelleAutor Gibin Ealias
Schreibe einen Kommentar