Je cherche un moyen de masquer un certain nombre de divs en utilisant l'événement bouton onclick.
Je sais que cela pourrait avoir quelque chose à voir avec .toggleClass('.AddCSSClassHere') mais je ne suis pas vraiment sûr... Je peux masquer/afficher un div mais pas le un dans le div spécifique au div parent. jquery vient d'un extrait de code que je voulais utiliser plus tôt. Tous les div avec la classe hidethis "" doivent être affichés ou masqués lorsque vous cliquez sur le bouton "Afficher les colonnes"
$('button').click(function() { $(this).siblings('div').toggleClass('hidethis '); }); * { marge : 0 ; remplissage : 0 ; } HTML, corps { hauteur : 100 % ; } corps { arrière-plan : #fff ; remplissage : 0 ; marge : 0 ; famille de polices : Myriad-Pro, Arial, "Varela Round", sans-serif ; taille de police : 16 px ; } .citation { hauteur : 100 % ; débordement : automatique ; } .main-div { position : collante ; haut : 0 ; } .header-div { affichage : flexible ; remplissage : 5px 0 ; couleur d'arrière-plan : #fff ; } .titres { affichage : flexible ; largeur : 100 % ; align-items : centre ; } .currencyinfo { largeur : ajustement du contenu ; largeur maximale : 100 px ; largeur minimale : 100 px ; alignement du texte : centre ; remplissage : 0 ; } .Info { largeur : ajustement du contenu ; largeur maximale : 100 px ; largeur minimale : 100 px ; alignement du texte : centre ; remplissage : 10px 0 ; } .devise { largeur maximale : 70 px ; largeur minimale : 70 px ; } .table-info { affichage : flexible ; direction flexible : rangée ; flex-wrap : envelopper ; largeur : 100 % ; overflow-y : défilement ; } .main-div-info { affichage : flexible ; alignement du texte : centre ; direction flexible : rangée ; flex-wrap : envelopper ; largeur : 100 % ; } .div-info { affichage : flexible ; direction flexible : rangée ; flex-wrap : envelopper ; largeur : 100 % ; remplissage : 10px 0 ; align-items : centre ; } .cache ça { affichage : aucun ; } Nom du produit ID Quantité Périodes
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez monter d'un niveau pour trouver l'élément cible en tant que frère ou sœur. L'indentation du contenu des éléments au niveau du bloc permet une meilleure visualisation.
Si vous souhaitez basculer tous ces éléments dans tous les conteneurs, vous devez introduire une nouvelle classe pour en garder une trace lorsque la classe est supprimée, ou les sélectionner tous et utiliser la liste des éléments. p>
$(function() { const elsToToggle = $('.hidethis'); $('.show-this-data').click(function() { $(this).parent().siblings('div').toggleClass('hidethis '); }); $('.show-all-data').click(function() { elsToToggle.toggleClass('hidethis'); }); });* { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px; } .quotation { height: 100%; overflow: auto; } .main-div { position: sticky; top: 0; } .header-div { display: flex; padding: 5px 0; background-color: #fff; } .titles { display: flex; width: 100%; align-items: center; } .currencyinfo { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 0; } .info { width: fit-content; max-width: 100px; min-width: 100px; text-align: center; padding: 10px 0; } .currency { max-width: 70px; min-width: 70px; } .table-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; overflow-y: scroll; } .main-div-info { display: flex; text-align: center; flex-direction: row; flex-wrap: wrap; width: 100%; } .div-info { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; padding: 10px 0; align-items: center; } .hidethis { display: none; }