Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie die Hover-Methode und die Toggle-Methode in jQuery

yulia
Freigeben: 2018-09-15 14:33:37
Original
2314 Leute haben es durchsucht

jQuery wird häufig in der Front-End-Entwicklung verwendet, und es gibt viele Wissenspunkte dazu. Heute werde ich Ihnen sagen, Wie man die Hover-Methode und die Toggle-Methode in jQuery verwendet, Für diejenigen, die es sind jQuery lernen, kommen Sie vorbei und schauen Sie es sich an.

jQuery bietet einige Methoden (z. B. Umschalten), um zwei Ereigniseffekte zusammenzuführen, z. B. Mouseover, Mouseout, Keyup, Keydown usw.

1 🎜>

hover(over,out) Eine Methode, die Hover-Ereignisse simuliert (die Maus bewegt sich über ein Objekt und aus diesem heraus). Dies ist eine benutzerdefinierte Methode, die für häufig verwendete Aufgaben einen „Keep-in-it“-Status bereitstellt.

Parameter:
over (Funktion): Die Funktion, die ausgelöst werden soll, wenn die Maus über das Element bewegt wird.
out (Funktion): Die Funktion, die ausgelöst werden soll, wenn sich die Maus aus dem Element herausbewegt.

Der Code lautet wie folgt:

 <script type="text/javascript">
 $(function(){
     $("#panel h5.head").hover(function(){
         $(this).next().show();// 鼠标悬浮时触发
    },function(){
         $(this).next().hide();// 鼠标离开时触发
    })
 })
 </script>
Nach dem Login kopieren

2. Toggle-Funktion

toggle(fn,fn) schaltet die Funktion um, die jedes Mal aufgerufen werden soll angeklickt wird. Wenn auf ein passendes Element geklickt wird, wird die erste angegebene Funktion ausgelöst, und wenn erneut auf dasselbe Element geklickt wird, wird die zweite angegebene Funktion ausgelöst. Jeder weitere Klick wiederholt den Aufruf dieser beiden Funktionen nacheinander. Kann mit Unbind („Klick“) gelöscht werden.

Der Code lautet wie folgt:

<script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){
         $(this).next().show();// 第一次点击时触发
    },function(){
         $(this).next().hide();// 第二次点击时触发,之后不停的切换
    })
 })
 </script>
Nach dem Login kopieren

toggle()-Methode schaltet den sichtbaren Zustand des Elements um.

Ausgewählte Elemente ausblenden, wenn sie sichtbar sind, und anzeigen, wenn die ausgewählten Elemente ausgeblendet sind. Die Methode toggle() schaltet den sichtbaren Zustand eines Elements um.
Ausgewählte Elemente ausblenden, wenn sie sichtbar sind, und anzeigen, wenn die ausgewählten Elemente ausgeblendet sind.

Der obige Code kann also auch wie folgt geschrieben werden:

Der Code lautet wie folgt:

<script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){
          $(this).next().toggle();
     },function(){
          $(this).next().toggle();
     })
 })
 /*$(function(){
     $("#panel h5.head").click(function(){
          $(this).next().toggle();
     })
 })*/
 </script>
Nach dem Login kopieren

Sie können auch einige CSS-Stile hinzufügen:

Der Der Code lautet wie folgt:

<style type="text/css">
 .highlight{ background:#FF3300; }
 </style>
 <script type="text/javascript">
 $(function(){
     $("#panel h5.head").toggle(function(){//配合css样式使用
        $(this).addClass("highlight");
         $(this).next().show();
     },function(){
         $(this).removeClass("highlight");
         $(this).next().hide();
     });
 })
</script>
Nach dem Login kopieren

Haben Sie ein neues Verständnis für die gängigen Hover-Ereignisse und Toggle-Ereignisse in jQuery gewonnen? Ich hoffe, dieser Artikel kann Ihnen helfen.


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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!