jquery cliquez pour faire disparaître l'élément parent

JQuery est une bibliothèque Javascript largement utilisée qui fournit un moyen simple et facile de manipuler des documents HTML et de gérer des événements. Dans le développement Web, vous devez parfois implémenter la fonction consistant à cliquer sur un élément pour faire disparaître son élément parent. Cet article explique comment utiliser JQuery pour réaliser cette fonction.

1. Structure HTML

Tout d'abord, nous devons définir une structure HTML, comprenant un élément parent et un élément enfant. Le code est le suivant :

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

2. Styles CSS

Afin de rendre la page plus belle, nous devons définir certains styles CSS. Parmi eux, l'élément parent doit être défini sur un positionnement relatif, l'élément enfant doit être défini sur un positionnement absolu et la position du coin supérieur gauche doit être définie sur 0. Le code est le suivant :

.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. Code JQuery

Maintenant, nous devons écrire du code JQuery pour réaliser la fonction de clic pour faire disparaître l'élément parent.

Tout d'abord, nous devons utiliser le sélecteur JQuery pour sélectionner l'élément parent et l'élément enfant, et définir l'élément enfant pour qu'il soit centré via CSS. Le code est le suivant :

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

Ensuite, nous devons utiliser la fonction click() de JQuery pour écouter les événements de clic sur la page, et lorsque l'événement click se produit, utiliser la fonction fadeOut() pour faire disparaître l'élément parent. Le code est le suivant :

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

4. Code complet

Enfin, le code complet est le suivant :

Code HTML :

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

Code CSS :

.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;
}

Code JQuery :

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

5. Résumé

Par les étapes ci-dessus, nous avons réussi. Il réalise la fonction de faire disparaître l'élément parent en cliquant dessus. Je pense que les lecteurs comprennent déjà l'utilisation de base de JQuery et comment utiliser JQuery pour implémenter certaines fonctions de page. Dans le même temps, les lecteurs peuvent également développer davantage sur cette base pour renforcer leurs compétences en développement Web.

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!