web-dev-qa-db-fra.com

jQuery .show () une boîte flexible

J'ai un élément de largeur d'une flexbox

<ul id="myFlexbox">

div#myFlexbox{
    display:flex;
}

après le cacher et le montrer, ça se gâte.

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

maintenant l'élément a un affichage de bloc au lieu de flex.

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

Comment puis-je utiliser .hide et .show avec des flexbox?

jquerycsscss3flexbox
16
Buffalo

La show() ajoute display:block par défaut à div. Vous pouvez changer la display en flex en utilisant jQuery css():

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

JQuery .show() ne connaît pas votre display: flex; (pas flexbox). Essayez plutôt d’ajouter et de supprimer une classe masquante.

CSS:

#myFlexbox{
  display: flex;
}

.hide{
  display: none !important;
}

JS:

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

https://jsfiddle.net/p2msLqtt/

Sinon, vous devez exécuter votre JS une fois le fichier CSS chargé et le domaine DOM prêt, je suppose - comme

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

Mise à jour du violon et définition de l'exécution de Javascript sur domready - cela fonctionne:

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

5
mxlse

Etant donné que les autres réponses ne prenaient pas en compte la possibilité que vous utilisiez l'argument duration ...

Réponse courte: Utilisez .hide pour masquer la valeur et cela ne devrait pas arriver.

Une petite explication:

Les éléments correspondants seront immédiatement masqués, sans aucune animation. Cela équivaut à appeler .css ("display", "none"), sauf que la valeur de la propriété display est enregistrée dans le cache de données de jQuery afin que l'affichage puisse ensuite être restauré à sa valeur initiale. Si un élément a une valeur d'affichage de flex et est masqué puis affiché, il sera à nouveau affiché flex.

De la documentation, Changé 'inline' en 'flex' pour s'adapter au contenu!

Alors jQuery sait ce que vous cachez! Si vous l'avez caché en utilisant .hide , c'est-à-dire, et il saura le montrer à nouveau avec la bonne valeur d'affichage.

3
aliqandil

juste utiliser

.class{display: none}

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

lorsque jquery ajoutera l'attribut de style css, fonctionnera parfaitement sur Chrome et Mozilla

2
nikolay

La solution class fonctionne, oui. Voici une approche différente que je suis venu avec:

Fonction Javascript

function showFlex(element) {

    var flexContainer = document.getElementById(element);

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

Pour l'utiliser:

showFlex( "yourIDhere" );

Notez que l'ID n'a pas besoin du # lorsque vous appelez la fonction.

Exemple:

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

2
fanta

Vous devriez envelopper votre contenu display: flex avec un élément.

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

lie votre javascript show/hide à '#flexWrapper'

0
ecoble