Heim > Artikel > Web-Frontend > So implementieren Sie die Toggle-Methode in jQuery

So implementieren Sie die Toggle-Methode in jQuery

php中世界最好的语言Original: 2018-03-14 15:51:102173Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie jQuery+JSONP domänenübergreifendNächster Artikel：So implementieren Sie jQuery+JSONP domänenübergreifend

In Verbindung stehende Artikel

Mehr sehen