suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >Per Klick mit Javascript erweitern und schließen

Per Klick mit Javascript erweitern und schließen

WBOY
WBOYOriginal
2023-05-29 22:40:081710Durchsuche

Da die Anforderungen an modernes Webdesign immer größer werden, wird auch die Nachfrage nach dynamischen Effekten immer größer. Eine der häufigsten Anforderungen besteht darin, auf eine Schaltfläche oder einen Link zu klicken, um Inhalte zu erweitern oder zu schließen. Derzeit können wir JavaScript verwenden, um diese Funktion zu implementieren.

JavaScript ist eine dynamische Programmiersprache, die HTML und CSS auf Webseiten bearbeiten sowie Benutzerinteraktionen und dynamische Effekte verarbeiten kann. In der folgenden Demo verwenden wir JavaScript, um eine Schaltfläche zu erstellen, die Inhalte erweitert und schließt.

Zuerst müssen wir eine HTML-Seite erstellen. Auf dieser Seite fügen wir ein DIV-Element hinzu, das den Inhalt enthält, und eine Schaltfläche, die den Inhalt erweitert und schließt. Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
   <head>
      <title>JavaScript点击展开和关闭</title>
      <style>
         .content {
            display: none; /* 隐藏内容 */
         }
      </style>
   </head>
   <body>
      <button onclick="toggle()">点击展开/关闭</button>
      <div class="content">
         <p>我是一个可以展开和关闭的内容。</p>
      </div>
      <script src="script.js"></script>
   </body>
</html>

Im obigen Code haben wir eine Schaltfläche und ein DIV-Element erstellt. Das DIV-Element enthält den Inhalt, den wir erweitern oder schließen möchten. Außerdem setzen wir die Anzeige des DIV-Elements auf „none“, sodass das Element zunächst nicht angezeigt wird.

Als nächstes müssen wir etwas JavaScript-Code hinzufügen, um die Erweiterungs- und Schließfunktionen zu implementieren. Wir platzieren diese Codes in der Datei script.js. 

let content = document.querySelector('.content');

function toggle() {
   if (content.style.display === 'none') {
      content.style.display = 'block';
   } else {
      content.style.display = 'none';
   }
}

Im obigen Code verwenden wir zunächst „document.querySelector“, um das DIV-Element mit dem Inhalt abzurufen und es in der Variablen „content“ zu speichern. Dann definieren wir eine Funktion namens „toggle“, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.

Die Funktion „toggle“ verwendet eine „if“-Anweisung, um zu prüfen, ob das „display“-Attribut des Content-DIV „none“ ist. Wenn ja, setzt die Funktion „toggle“ ihre Eigenschaft „display“ auf „block“, damit der Inhalt angezeigt wird. Andernfalls setzt die „toggle“-Funktion ihre „display“-Eigenschaft auf „none“ und verbirgt so ihren Inhalt.

Jetzt haben wir die Möglichkeit zum Erweitern und Schließen von Inhalten abgeschlossen. Wenn Sie auf die Schaltfläche klicken, wird das Inhalts-DIV je nach aktuellem Anzeigestatus angezeigt oder ausgeblendet. Wir können den Stil und den Code an unsere eigenen Bedürfnisse anpassen, um sie an unsere eigenen Designanforderungen anzupassen.

JavaScript ist eine sehr leistungsfähige Sprache, die dem Webdesign viele dynamische und interaktive Funktionen hinzufügen kann. Ich hoffe, dieser Artikel war hilfreich und hat Sie dazu inspiriert, weitere JavaScript-Programmiertechniken auszuprobieren.

Das obige ist der detaillierte Inhalt vonPer Klick mit Javascript erweitern und schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum verwenden Botvs Javascript?Nächster Artikel：Warum verwenden Botvs Javascript?

In Verbindung stehende Artikel

Mehr sehen