Heim > Web-Frontend > js-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-06-26 13:30:53
Original
1970 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren


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!

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