So implementieren Sie die Click-to-Hide-Anzeige in CSS

CSS Click to Hide Show

Im heutigen Internetzeitalter hat sich der Schwerpunkt des Webdesigns von der einfachen statischen Anzeige hin zu einem fortschrittlicheren interaktiven Erlebnis verlagert. Unter diesen ist das Ausblenden und Anzeigen eine der am häufigsten verwendeten Interaktionsmethoden. Mit dieser Methode können Benutzer die erforderlichen Informationen bequemer abrufen und redundante Inhalte auf der Seite erheblich reduzieren. In CSS gibt es mehrere Methoden zum Ein- und Ausblenden. In diesem Artikel werden sie einzeln vorgestellt.

1. Verwenden Sie das Anzeigeattribut

Der Wert des Anzeigeattributs in CSS steuert, ob das Element angezeigt oder ausgeblendet wird. Zu den Werten gehören:

• none: Das Element wird vollständig von der Seite entfernt und ist für das Layout vollständig unsichtbar.
• Block: Das Element wird als Element auf Blockebene angezeigt, d. h. es nimmt eine ganze Zeile ein.
• inline: Das Element wird als Inline-Element angezeigt, d. h. es nimmt den gleichen Platz ein wie der Text.
• inline-block: Das Element wird als Inline-Element angezeigt, es können jedoch Attribute wie Breite und Höhe festgelegt werden.

Mithilfe des Anzeigeattributs können wir das Anzeigeattribut des Elements ausblenden und anzeigen. Der Beispielcode lautet wie folgt:

HTML-Code : #🎜🎜 #

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

CSS-Code:

.box {
  display: none;
}

JavaScript-Code:

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";
  }
});

Verwenden Sie das Deckkraftattribut
2. #🎜 🎜#
opacity Eigenschaften steuern die Transparenz eines Elements, um es auszublenden oder anzuzeigen. Wenn die Opazitätseigenschaft auf 0 gesetzt ist, ist das Element vollständig transparent und kann daher nicht gesehen werden. Wenn die Opazitätseigenschaft 1 ist, ist sie vollständig sichtbar. Aber es wird immer noch seinen Platz auf der Seite einnehmen. #🎜🎜 ## 🎜🎜#HTML -Code:

#

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

#CSS -Code:

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

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

#JavaScript Code:

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

#🎜🎜 ## 🎜🎜##Sichtbarkeit verwenden Attribut

Das Sichtbarkeitsattribut steuert, ob das Element ausgeblendet ist, aber dennoch seinen Platz behält, es entfernt das Element nicht vollständig von der Seite. Wenn die Sichtbarkeitseigenschaft auf „verborgen“ gesetzt ist, wird das Element ausgeblendet, nimmt aber dennoch seinen Platz auf der Seite ein. Wenn die Sichtbarkeitseigenschaft sichtbar ist, ist sie vollständig sichtbar.

HTML-Code:

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

CSS-Code:

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

JavaScript-Code:

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

Zusammenfassend, unabhängig von der Oben: Unabhängig davon, ob es sich um Anzeige-, Deckkraft- oder Sichtbarkeitsattribute handelt, können sie alle den Effekt des Ausblendens und Anzeigens erzielen. Jede dieser drei Methoden hat ihre eigenen Vor- und Nachteile, und wir können die geeignete Methode entsprechend den tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Click-to-Hide-Anzeige in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!