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?
La show()
ajoute display:block
par défaut à div
. Vous pouvez changer la display
en flex
en utilisant jQuery css()
:
$('#myFlexbox').css('display', 'flex');
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:
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.
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
La solution class
fonctionne, oui. Voici une approche différente que je suis venu avec:
function showFlex(element) {
var flexContainer = document.getElementById(element);
flexContainer.setAttribute("style", "display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;");
}
showFlex( "yourIDhere" );
Notez que l'ID n'a pas besoin du # lorsque vous appelez la fonction.
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'