Comment implémenter la méthode toggle dans jQuery-Tutoriel H5-php.cn

Comment implémenter la méthode toggle dans jQuery

php中世界最好的语言

Libérer： 2018-03-14 15:51:10

original

2210 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter la méthode toggle dans jQuery. Quelles sont les précautions lors de l'utilisation de la méthode toggle dans jQuery. Ce qui suit est un cas pratique, jetons un coup d'œil.

Nous savons que jQuery est utilisé pour monter et descendre, et vous pouvez directement utiliser les méthodes slideUp() et slideDown().

Les méthodes slideUp() et slideDown() modifieront uniquement la hauteur de l'élément. Si la valeur de l'attribut display d'un élément est "aucun", lorsque la méthode slideDown() est appelée, l'élément sera affiché en s'étendant de haut en bas. La méthode slideUp() est tout le contraire. L'élément sera raccourci et masqué de haut en bas.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

Copier après la connexion

Alors, qu'en est-il de glisser vers l'intérieur et vers l'extérieur à gauche et à droite ?

La démo est la suivante :

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment utiliser le composant select dans jquery

Comment implémenter jquery return Car login effect

Application et analyse de la fonction personnalisée jQuery

Cas d'événement de sortie de souris et explication détaillée

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!