Comment utiliser jQuery pour ouvrir et fermer la fonction Div

Dans le développement Web moderne, les effets interactifs sont devenus un élément important d'un site Web. Parmi eux, l'ouverture et la fermeture dynamiques de Div sont une fonction fréquemment utilisée. Cette fonction peut améliorer l'expérience utilisateur et améliorer la valeur d'utilisation du site Web.

Dans cet article, nous présenterons comment utiliser jQuery pour réaliser la fonction d'ouverture et de fermeture de Div. Commençons !

1. Structure du code HTML
Tout d'abord, nous devons écrire une structure de code HTML pour implémenter cette fonction. Le code est le suivant :

<div class="container">
  <div class="trigger"></div>
  <div class="panel">
    <p>这里是面板内容</p>
  </div>
</div>

Ici, nous utilisons un élément conteneur "container", qui contient l'élément titre "trigger" et l'élément panel "panel".

2. Style CSS
Nous pouvons utiliser CSS pour définir les styles des conteneurs, des titres et des panneaux. Le code est le suivant :

.container {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

.trigger {
  position: relative;
  height: 50px;
  background-color: #EEE;
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  background-color: #FFF;
}

Dans ce code CSS, nous définissons le conteneur pour qu'il soit relativement positionné et centré. L'en-tête est défini comme un élément de niveau bloc avec une couleur d'arrière-plan, tandis que le panneau est défini pour être positionné de manière absolue et a une hauteur de 0, ce qui signifie que le panneau n'est pas visible sur la page. Dans le même temps, nous avons ajouté un effet de transition au panneau afin que lorsqu'il est ouvert ou fermé, la hauteur change progressivement en 0,3 seconde. Enfin, nous définissons la couleur d’arrière-plan du panneau sur blanc.

3. Code JS
Ensuite, nous devons utiliser jQuery pour écrire du code JS afin d'implémenter cette fonction. Le code est le suivant :

$(document).ready(function() {
  $('.trigger').click(function() {
    var panel = $(this).next('.panel');
    if (panel.height() == 0) {
      panel.css('height', panel.prop('scrollHeight') + 'px');
    } else {
      panel.css('height', '0');
    }
  });
});

Dans ce code, nous utilisons le symbole "$" de jQuery au lieu du mot-clé "jQuery", afin que notre code paraisse plus concis.

Nous enveloppons d'abord cette fonction dans une fonction $(document).ready(), qui est une fonction jQuery, indiquant que la fonction correspondante sera exécutée lors du chargement du DOM de la page.

Ensuite, nous utilisons une méthode « .click() » pour lier un gestionnaire d'événements à l'élément titre. Lorsque l’utilisateur clique sur l’élément title, le gestionnaire d’événements sera déclenché. Nous utilisons la méthode ".next()" de jQuery pour obtenir l'élément suivant, dans ce cas l'élément panel. On vérifie ensuite la hauteur de l'élément panel, et si elle est 0, on fixe la hauteur de l'élément panel à sa hauteur de défilement sinon, on fixe sa hauteur à 0, pour le fermer ;

4. Conclusion
Dans cet article, nous avons appris à utiliser jQuery pour réaliser la fonction d'ouverture et de fermeture de Div. Bien qu'il ne s'agisse que d'un exemple simple, il illustre comment utiliser jQuery pour contrôler et manipuler les éléments de la page. Nous devons noter que lorsque nous implémentons des effets dynamiques, certaines propriétés CSS et fonctions jQuery peuvent devoir être ajustées sur différents navigateurs ou appareils. Cependant, jQuery, en tant que bibliothèque JavaScript open source, a joué un rôle important dans le développement Web et continuera d'être l'un des outils que nous utilisons dans le développement front-end.

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!