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

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>

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>

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>

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>

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!