Heim > Web-Frontend > js-Tutorial > Beispiele für die Verwendung der Funktion toggle() in jQuery_jquery

Beispiele für die Verwendung der Funktion toggle() in jQuery_jquery

WBOY
Freigeben: 2016-05-16 16:03:29
Original
1262 Leute haben es durchsucht

Ich bin heute auf ein interessantes Beispiel gestoßen und habe es aufgezeichnet.

Ein Menü der ersten Ebene enthält ein Menü der zweiten Ebene. Das Menü der zweiten Ebene verknüpft Seitenelemente durch Ankerpunkte. Der gewünschte Effekt besteht darin, dass die Seite beim Klicken auf den Anker auf den entsprechenden Anker verweist und das Menü der zweiten Ebene ausgeblendet wird. Wenn erneut auf das Menü der ersten Ebene geklickt wird, wird die Ausführung fortgesetzt. .

Ich habe viele Methoden ausprobiert, aber es hat nicht funktioniert. Schließlich habe ich es erkannt, indem ich die Umschaltfunktion von jquery gelesen habe.

    //这样写可以
    $(".nav").toggle(function(){
      $(".content").slideToggle();
    });
    //这样写不可以
    $(".nav").toggle(function(){
     $(".content").slideDown();
   },function(){
     $(".content").slideUp();
   });
   //这样写也可以
    $(".nav").click(function(){
      $(".content").toggle("slow");
    });

Nach dem Login kopieren

Anbei finden Sie die Anweisungen zur Verwendung von toggle()

toggle(fn,fn)

Ändern Sie die Funktion, die bei jedem Klick aufgerufen werden soll.
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.

Rückgabewert
jQuery

Parameter

fn (Funktion): Die Funktion, die ausgeführt werden soll, wenn der ungerade Klick ausgeführt wird.

fn (Funktion): Die Funktion, die ausgeführt werden soll, wenn der gerade Klick ausgeführt wird.

Beispiel

Eine Klasse in die Tabelle verschieben

jQuery-Code:

$("td").toggle( 
function () { 
$(this).addClass("selected"); 
}, 
function () { 
$(this).removeClass("selected"); 
} 
);

Nach dem Login kopieren

Zusätzlich: Das Umschalten funktioniert nur, wenn darauf geklickt wird. Hover ist nur ein Ereignis, bei dem sich die Maus hinein- und herausbewegt, und hat nichts mit Klicks zu tun. Beide können zusammen verwendet werden

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