it-swarm.com.de

jQuery .show () eine Flexbox

Ich habe eine Elementbreite einer Flexbox

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

nach dem Verstecken und Zeigen wird es durcheinander gebracht.

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

das Element hat jetzt eine Anzeige von Block anstelle von Flex.

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

Wie kann ich .hide und .show mit Flexboxen verwenden?

16
Buffalo

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

$('#myFlexbox').css('display', 'flex');
35
guizo

JQuery .show() kennt Ihren display: flex; nicht (keine Flexbox). Versuchen Sie stattdessen, eine versteckende Klasse hinzuzufügen und zu entfernen.

CSS:

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS:

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

https://jsfiddle.net/p2msLqtt/

Andernfalls müssen Sie Ihre JS ausführen, nachdem das CSS vollständig geladen wurde und DOM fertig ist.

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

Die Geige wurde aktualisiert und die Javascript-Ausführung auf "domready" gesetzt - es funktioniert:

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

5
mxlse

Da andere Antworten nicht die Möglichkeit berücksichtigten, dass Sie möglicherweise das Argument duration verwenden ...

Kurze Antwort: Verwenden Sie .hide , um den Wert auszublenden. Das sollte nicht passieren.

Eine kleine Erklärung:

Die übereinstimmenden Elemente werden sofort ohne Animation ausgeblendet. Dies entspricht in etwa dem Aufruf von .css ("display", "none"), , mit der Ausnahme, dass der Wert der display-Eigenschaft im Daten-Cache von jQuery gespeichert wird, sodass die Anzeige später auf ihren ursprünglichen Wert zurückgesetzt werden kann. Wenn ein Element einen Anzeigewert von flex hat und ausgeblendet wird, wird es wieder angezeigt flex.

Von der Dokumentation "Inline" in "Flex" geändert, um sie an den Inhalt anzupassen!

JQuery weiß also, was Sie verstecken! Wenn Sie es mit .hide ausgeblendet haben, kann es mit dem richtigen Anzeigewert wieder angezeigt werden.

3
aliqandil

benutz einfach

.class{display: none}

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

wenn jquery das style-Attribut css angewendet wird, funktioniert es perfekt für Chrome und Mozilla

2
nikolay

Die class-Lösung funktioniert, ja. Hier ein anderer Ansatz, den ich mir ausgedacht habe:

Javascript-Funktion

function showFlex(element) {

    var flexContainer = document.getElementById(element);

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

Um es zu benutzen:

showFlex( "yourIDhere" );

Beachten Sie, dass die ID das # nicht benötigt, wenn Sie die Funktion aufrufen.

Beispiel:

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

2
fanta

Ich weiß, dass es etwas zu spät ist (3 Jahre), aber so habe ich es geschafft.

Ich habe in CSS eine Regel für mein div erstellt, zum Beispiel #myDiv, die so aussieht

#myDiv[style*='block'] {
    display: inline-flex !important;
}

Es nutzt die Vorteile von jQuery für das DOM und wendet 'display: block' an. Ich habe Inline-Flex verwendet, weil ich es für das, was ich tue, brauchte, aber es kann sein, was immer Sie wollen. Auf diese Weise wird die Regel schneller angewendet, ohne zu flackern.

Die Idee ist, eine benutzerdefinierte Funktion showFlex() zu erstellen, die jQuery show() ähnelt, und sie mit dem Element aufzurufen, das die Eigenschaft display:flex; Haben muss.

jQuery Solution

$.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.

1
Gibin Ealias

Sie sollten Ihren display: flex-Inhalt mit einem Element umschließen.

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

binden Sie Ihr JavaScript ein-/ausblenden an '#flexWrapper'

0
ecoble