Comment masquer certains divs en cliquant sur un bouton ?
P粉193307465
P粉193307465 2023-09-04 15:51:01
0
1
587
<p>Je cherche un moyen de masquer un certain nombre de divs en utilisant l'événement bouton onclick. </p> <p>Je sais que cela pourrait avoir quelque chose à voir avec <code>.toggleClass('.AddCSSClassHere')</code> 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"</p> <p> <pre class="brush:js;toolbar:false;">$('button').click(function() { $(this).siblings('div').toggleClass('hidethis '); });</pré> <pre class="brush:css;toolbar:false;">* { 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 ; }</pré> <pre class="brush:html;toolbar:false;"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" intégrité ="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <section class="citation"> <div class="main-div"> <div class="header-div"> <div class="titres"> <div class="currencyinfo product-title"> <button class="show-this-data">afficher les colonnes</button> </div> <div class="currencyinfo"></div> <div class="currencyinfo"></div> <div class="currencyinfo"></div> <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div> <div class="currencyinfo hidethis"></div> <div class="currencyinfo hidethis"></div> <div class="currencyinfo hidethis"></div> </div> </div> </div> <div class="main-div"> <div class="header-div"> <div class="titres"> <div class="info product-title">Nom du produit</div> <div class="info">ID</div> <div class="info">Quantité</div> <div class="info">Périodes</div> <div class="info hidethis">&nbsp;</div> <div class="info hidethis">Prix unitaire</div> <div class="info hidethis">Coût unitaire</div> <div class="info hidethis">Remise unitaire</div> </div> </div> </div> <div class="main-div"> <div class="header-div"> <div class="titres"> <div class="info product-title"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i><a href="#"> ;Plein gaz</a></div> <div class="info">&nbsp;</div> <div class="info">1.0</div> <div class="info">1.0</div> <div class="info hidethis">USD</div> <div class="info hidethis">37,50</div> <div class="info hidethis">0.0</div> <div class="info hidethis">0.0</div> </div> </div> </div> </section></pré> </p>
P粉193307465
P粉193307465

répondre à tous(1)
P粉345302753

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<section class="quotation">

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="currencyinfo product-title">
          <button class="show-this-data">show columns in this block</button>
          <button class="show-all-data">show columns in all blocks</button>
        </div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo"></div>
        <div class="currencyinfo hidethis" style="border-left: 1px solid #bdbdbd;">Local</div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
        <div class="currencyinfo hidethis"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title">Product name</div>
        <div class="info">ID</div>
        <div class="info">Quantity</div>
        <div class="info">Periods</div>
        <div class="info hidethis">&nbsp;</div>
        <div class="info hidethis">Unit Price</div>
        <div class="info hidethis">Unit Cost</div>
        <div class="info hidethis">Unit Discount</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="titles">
        <div class="info product-title"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i><a href="#">Full Throttle</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info hidethis">USD</div>
        <div class="info hidethis">37.50</div>
        <div class="info hidethis">0.0</div>
        <div class="info hidethis">0.0</div>
      </div>
    </div>
  </div>
</section>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal