So implementieren Sie die Toggle-Methode in jQuery-H5-Tutorial-php.cn

So implementieren Sie die Toggle-Methode in jQuery

php中世界最好的语言

Freigeben： 2018-03-14 15:51:10

Original

2211 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Toggle-Methode in jQuery implementieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Toggle-Methode in jQuery? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Wir wissen, dass jQuery zum Auf- und Abbewegen verwendet wird und Sie die Methoden slideUp() und slideDown() direkt verwenden können.

Die Methoden slideUp() und slideDown() ändern nur die Höhe des Elements. Wenn der Attributwert display eines Elements „none“ ist, wird das Element beim Aufruf der slideDown()-Methode von oben nach unten angezeigt. Die Methode slideUp() ist genau das Gegenteil. Das Element wird von oben nach unten gekürzt und ausgeblendet.

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Wie wäre es also mit dem Ein- und Ausschieben nach links und rechts?

Die Demo lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte achten Sie auf andere php-chinesische Websites. Verwandte Artikel!

Empfohlene Lektüre:

So verwenden Sie die ausgewählte Komponente in jquery

So implementieren Sie jquery return Auto-Anmeldeeffekt

Anwendung und Analyse benutzerdefinierter jQuery-Funktionen

Mouse-out-Ereignisfall und detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Toggle-Methode in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!