jquery div fermer

jQuery est un langage de programmation très couramment utilisé qui peut nous aider à implémenter diverses fonctions rapidement et facilement dans le développement Web. L'une des applications courantes consiste à fermer des div.

Dans de nombreuses pages Web, nous voyons souvent diverses boîtes contextuelles, boîtes d'invite ou publicités. Ces boîtes contextuelles sont généralement implémentées à l'aide de div. Cependant, une fois que l'utilisateur a atteint son objectif, ces boîtes contextuelles doivent être fermées. Si l'utilisateur s'appuie aveuglément sur la fermeture manuelle, il s'agit d'une opération très peu conviviale pour l'expérience utilisateur. Par conséquent, nous devons fermer automatiquement ces div par programme dans certaines conditions.

Voyons maintenant comment utiliser jQuery pour fermer des div.

La première étape consiste à écrire le code HTML

Dans le code HTML, nous devons définir l'identifiant du div à fermer pour les opérations ultérieures. Par exemple, nous pouvons définir un div à fermer comme ceci :

<div id="close-me">
  <p>这是要关闭的div。</p>
  <button class="close-btn">关闭</button>
</div>

Dans ce code, nous définissons un identifiant appelé "close-me" pour ce div, et ajoutons un bouton à l'intérieur du div pour fermer manuellement le div.

Deuxième étape, écrire le code jQuery

Ensuite, nous devons définir la fonction de fermeture du div dans le code jQuery. Nous pouvons fermer automatiquement le div lorsque l'utilisateur clique sur le bouton en écoutant l'événement de clic sur le bouton. Le code est le suivant :

$(document).ready(function() {
  $('.close-btn').click(function() {
    $('#close-me').fadeOut('slow');
  });
});

Dans ce code, nous utilisons la méthode .ready() de jQuery pour nous assurer que tous les éléments de la page Web ont été chargés. Ensuite, nous effectuons la fonction de fermeture du div en écoutant l'événement click du bouton. Lorsque l'on clique sur le bouton, nous utilisons la méthode fadeOut() de jQuery pour masquer progressivement le div à fermer.

Il est à noter que si nous voulons que le div ait des effets spéciaux lorsqu'il est fermé, nous pouvons spécifier certains paramètres dans la méthode fadeOut() pour contrôler la forme et la vitesse des effets spéciaux. Par exemple, nous avons utilisé « lent » comme paramètre dans cet exemple, ce qui signifie qu'il disparaît progressivement une fois fermé et que l'effet est plus doux.

La troisième étape, tester le code

Enfin, nous devons tester si le code peut s'exécuter normalement. Nous pouvons vérifier l'exactitude du code en ouvrant la page Web et en observant si le div peut être fermé en douceur lorsque vous cliquez sur le bouton.

Résumé

Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de fermeture de div à l'aide de jQuery. Dans le développement Web réel, cette fonction peut être utilisée pour diverses boîtes contextuelles, boîtes d'invite ou publicités, etc., afin de rendre l'interaction des pages Web plus intelligente et conviviale et d'apporter une meilleure expérience aux utilisateurs. Par conséquent, il est indispensable que les développeurs Web apprennent à utiliser jQuery pour implémenter cette fonction.

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!