Klicken Sie auf jquery, um das übergeordnete Element verschwinden zu lassen

JQuery ist eine weit verbreitete Javascript-Bibliothek, die eine einfache und unkomplizierte Möglichkeit bietet, HTML-Dokumente zu bearbeiten und Ereignisse zu verarbeiten. In der Webentwicklung müssen Sie manchmal die Funktion implementieren, auf ein Element zu klicken, um das übergeordnete Element verschwinden zu lassen. In diesem Artikel wird erläutert, wie Sie JQuery verwenden, um diese Funktion zu erreichen.

1. HTML-Struktur

Zuerst müssen wir eine HTML-Struktur definieren, einschließlich eines übergeordneten Elements und eines untergeordneten Elements. Der Code lautet wie folgt:

<div class="parent">
  <div class="child"></div>
</div>

2. CSS-Stile

Um die Seite schöner zu machen, müssen wir einige CSS-Stile definieren. Unter anderem muss das übergeordnete Element auf relative Positionierung eingestellt werden, das untergeordnete Element muss auf absolute Positionierung eingestellt werden und die Position der oberen linken Ecke muss auf 0 gesetzt werden. Der Code lautet wie folgt:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

3. JQuery-Code

Jetzt müssen wir JQuery-Code schreiben, um die Funktion des Klickens zu realisieren, um das übergeordnete Element verschwinden zu lassen.

Zuerst müssen wir den JQuery-Selektor verwenden, um das übergeordnete Element und das untergeordnete Element auszuwählen, und das untergeordnete Element über CSS so einstellen, dass es zentriert wird. Der Code lautet wie folgt:

$(document).ready(function(){
  $(".child").css("margin", "auto");
});

Als nächstes müssen wir die click()-Funktion von JQuery verwenden, um auf Seitenklickereignisse zu warten, und wenn das Klickereignis auftritt, verwenden wir die fadeOut()-Funktion, um das übergeordnete Element verschwinden zu lassen. Der Code lautet wie folgt:

$(document).ready(function(){
  $(".child").css("margin", "auto");
  
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

4. Vollständiger Code

Schließlich lautet der vollständige Code wie folgt:

HTML-Code:

<div class="parent">
  <div class="child"></div>
</div>

CSS-Code:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: auto;
}

JAbfragecode:

$(document).ready(function(){
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

5. Zusammenfassung

Durch Die oben genannten Schritte sind uns gelungen. Durch Klicken darauf wird die Funktion erkannt, das übergeordnete Element verschwinden zu lassen. Ich glaube, dass die Leser bereits die grundlegende Verwendung von JQuery verstehen und wissen, wie man JQuery zum Implementieren bestimmter Seitenfunktionen verwendet. Gleichzeitig können Leser auf dieser Grundlage ihre Webentwicklungsfähigkeiten weiter ausbauen.

Das obige ist der detaillierte Inhalt vonKlicken Sie auf jquery, um das übergeordnete Element verschwinden zu lassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!