Comment implémenter l'affichage cliquer pour masquer en CSS

CSS Click to Hide Show

À l'ère d'Internet d'aujourd'hui, l'objectif de la conception Web est passé d'un simple affichage statique à une expérience interactive plus avancée. Parmi elles, le masquage et l'affichage sont l'une des méthodes d'interaction les plus couramment utilisées. Cette méthode permet aux utilisateurs d'obtenir les informations requises plus facilement et peut réduire considérablement le contenu redondant sur la page. En CSS, il existe plusieurs méthodes pour masquer et afficher, et cet article les présentera une par une.

1. Utilisez l'attribut display

La valeur de l'attribut display en CSS contrôle si l'élément est affiché ou masqué. Les valeurs incluent :

• aucun : L'élément sera complètement supprimé de la page et sera complètement invisible dans la mise en page.
• block : l'élément est affiché comme un élément de niveau bloc, ce qui signifie qu'il occupe une ligne entière.
• inline : l'élément est affiché comme un élément en ligne, ce qui signifie qu'il occupe le même espace que le texte.
• inline-block : l'élément est affiché comme un élément en ligne, mais des attributs tels que la largeur et la hauteur peuvent être définis.

En utilisant l'attribut display, nous pouvons masquer et afficher en ajoutant ou en supprimant l'attribut display de l'élément. L'exemple de code est le suivant :

Code HTML :

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Code CSS :

.box {
  display: none;
}

Code JavaScript :

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

.

2. Utiliser l'attribut d'opacité

L'attribut opacité contrôle la transparence de l'élément pour obtenir l'effet de masquage ou d'affichage. Lorsque la propriété opacity est définie sur 0, l'élément sera complètement transparent, il ne sera donc pas visible. Lorsque la propriété d'opacité est égale à 1, elle est entièrement visible. Mais il occupera quand même sa place sur la page.

Code HTML :

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Code CSS :

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

Code JavaScript :

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

3. Utilisez l'attribut de visibilité

L'attribut de visibilité contrôle si un élément est masqué mais conserve toujours son espace, il ne supprime pas complètement l'élément de la page. Lorsque la propriété de visibilité est définie sur masqué, l'élément sera masqué mais occupera toujours son espace sur la page. Lorsque la propriété de visibilité est visible, elle est entièrement visible.

Code HTML :

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

Code CSS :

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

Code JavaScript :

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

Pour résumer, qu'il s'agisse d'attributs d'affichage, d'opacité ou de visibilité, ils peuvent obtenir l'effet de cacher et d'afficher. Chacune de ces trois méthodes a ses propres avantages et inconvénients, et nous pouvons choisir la méthode appropriée en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!