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.
Der Wert des Anzeigeattributs in CSS steuert, ob das Element angezeigt oder ausgeblendet wird. Zu den Werten gehören:
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>
.box { display: none; }
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"; } });
<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"); });
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.
<div class="box"> <p>隐藏的内容</p> </div> <button id="toggle">显示/隐藏</button>
.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!