jquery développer fermer

Dans le développement front-end moderne, jQuery est devenu une bibliothèque JavaScript préférée parmi les développeurs. Il utilise une syntaxe simple et des méthodes faciles à comprendre pour gérer les opérations DOM, la gestion des événements et les effets d'animation. Cet article explique comment utiliser jQuery pour développer et fermer des éléments.

1. Connaissances préalables

Avant de commencer à utiliser jQuery pour développer et fermer des éléments, il est nécessaire de comprendre certaines connaissances de base du front-end. Le premier est la maîtrise des propriétés CSS, notamment les propriétés d’affichage et de visibilité. En surface, ils cachent tous deux des éléments, mais ils sont très différents.

Lorsque l'attribut d'affichage d'un élément est défini sur "aucun", l'élément est complètement supprimé et ne prend aucun espace. Lorsque la propriété de visibilité d'un élément est définie sur "caché", l'élément existe toujours, mais il prend toujours de la place, il est simplement invisible.

2. Ajouter des fonctions d'expansion et de fermeture aux éléments

Dans jQuery, nous pouvons utiliser la méthode slideToggle() pour compléter les fonctions d'expansion et de fermeture des éléments. Cette méthode détecte automatiquement si l'élément est visible et développe ou ferme l'élément en fonction de sa visibilité. Voici un exemple simple qui montre comment utiliser slideToggle() pour basculer l'affichage d'un élément div :

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle();
    });
  });
</script>

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, le code JavaScript appelle la méthode slideToggle(), qui dépend de la Élément div. Visibilité pour développer ou fermer un élément.

3. Styles personnalisés

En plus d'utiliser l'effet d'animation jQuery par défaut, nous pouvons également personnaliser le style via CSS pour rendre l'animation d'expansion et de fermeture plus personnalisée. Voici un exemple qui montre comment changer la couleur d'arrière-plan d'un élément lorsqu'il est développé et fermé :

<button id="toggle">展开/关闭</button>
<div id="content">这里是内容</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('#toggle').click(function() {
      $('#content').slideToggle('slow', function() {
        $(this).toggleClass('open');
      });
    });
  });
</script>

<style>
  #content {
    background-color: #eee;
    display: none;
    padding: 20px;
  }

  .open {
    background-color: #ffa;
  }
</style>

Dans cet exemple, nous définissons une classe CSS open qui sera ajoutée à l'élément lorsqu'il sera développé. Lorsque vous cliquez à nouveau sur le bouton Développer, la classe ouverte est supprimée de l'élément. Cela nous permet d'utiliser des styles CSS pour personnaliser l'apparence développée et fermée.

4. Afficher et masquer certains éléments

Enfin, implémentons une fonction plus avancée : développer et fermer un élément dans un autre élément. Dans ce cas, nous devons utiliser la méthode siblings() de jQuery. Cette méthode nous permet de rechercher tous les éléments au même niveau que l'élément sélectionné afin de pouvoir les développer ou les fermer.

Voici un exemple qui montre comment afficher et masquer des éléments dd dans un élément dl au même niveau lorsqu'un lien est cliqué :

<a href="#">展开dd元素</a>
<dl>
  <dt>元素1</dt>
  <dd>这是元素1的描述</dd>
  <dt>元素2</dt>
  <dd>这是元素2的描述</dd>
  <dt>元素3</dt>
  <dd>这是元素3的描述</dd>
</dl>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function() {
    $('a').click(function() {
      var dd = $(this).siblings('dl').find('dd');
      dd.slideToggle('slow', function() {
        if (dd.is(':visible')) {
          $('a').text('隐藏dd元素');
        } else {
          $('a').text('展开dd元素');
        }
      });
      return false; // 必须！
    });
  });
</script>

<style>
  dd {
    display: none;
    padding: 10px;
    background-color: #eee;
    margin: 0;
  }
</style>

Dans cet exemple, nous utilisons la méthode siblings() pour trouver le dl au même niveau. level comme éléments de lien et utilisez la méthode find() pour rechercher tous les éléments dd. Lorsqu'un lien est cliqué, nous développons ou fermons tous les éléments dd et modifions le texte du lien pour refléter son état.

5. Résumé

jQuery est une puissante bibliothèque JavaScript qui peut être utilisée pour écrire rapidement des applications Web dynamiques et interactives. Dans cet article, nous avons appris à utiliser jQuery pour développer et fermer des éléments, ainsi que personnaliser l'animation de ces éléments. Nous avons également vu comment utiliser la méthode siblings() pour rechercher et opérer sur des éléments de même niveau. Ces technologies sont très utiles pour créer des applications Web modernes, il est donc recommandé aux développeurs de les comprendre en profondeur et de les utiliser dans leurs propres projets.

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!