Ausführliche Erklärung zur Verwendung von Toggle und Hover in jQuery

Dieser Artikel konzentriert sich darauf, Ihnen die Verwendungsmethoden und Beispiele der beiden Funktionen Hover und Toggle in jQuery vorzustellen. Er ist sehr einfach und praktisch und wird Freunden als Referenz empfohlen.

jQuery bietet einige Methoden (z. B. Umschalten), um die Auswirkungen von zwei Ereignissen miteinander zu kombinieren, z. B.: Mouseover, Mouseout; Keyup, Keydown usw.

1. Hover-Funktion

hover(over,out) Eine Methode, die ein Hover-Ereignis simuliert (die Maus bewegt sich über ein -Objekt und bewegt sich aus diesem Objekt 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.

<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 aufzurufende Funktion bei jedem Klick um. 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. Sie können Unbind („Klick“) zum Löschen verwenden. Die Methode

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

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. 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:

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

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Toggle und Hover in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!