jQuery Ein-/Ausblenden umschalten
-
Verwendung der Methode
toggle()von jQuery zum Umschalten von Ausblenden/Einblenden -
Verwenden Sie die Methoden
hide()undshow(), um zwischen Ausblenden und Anzeigen umzuschalten
Die jQuery-Bibliothek minimiert die Verwendung eines Stapels von Codes und hilft bei Lösungen mit weniger Codezeilen.
Bis jQuery Version 1.8 war die Methode toggle() weit verbreitet, und in Version 1.8 war sie veraltet. In Version 1.9 wurde es mit einem eindeutigen Token entfernt.
Wir werden in unserem Beispiel besprechen, wie die Funktion toggle() funktioniert und warum später davon abgeraten wurde. Eine andere Möglichkeit, die Lösung für das Toggle-Verhalten zu erkennen, ist die Verwendung der Methoden show() und hide().
In diesem Zusammenhang betrachten wir eine bedingte Anweisung, sodass wir eine Schaltfläche verwenden können, um die Umschaltaufgabe auszuführen. Lassen Sie uns zur besseren Visualisierung in die Instanzen eintauchen.
Verwendung der Methode toggle() von jQuery zum Umschalten von Ausblenden/Einblenden
Im Anwendungsfall der toggle()-Methode lösen wir diese in der Regel durch ein click-Event aus. Auch hier gibt es in der Implementierung der Methode ein weiteres click-Event zusammen mit einem preventDefault().
Es hebt also das Doppelklickereignis auf und soll ordnungsgemäß funktionieren. Aber die Methode ist zu geradlinig und verursacht oft Probleme, wenn das Ereignis mehr als zweimal aufgerufen wird.
Um diese mehrdeutige Eigenschaft zu beseitigen, wurde die Methode später entfernt. Es wird jedoch immer noch als explizit verwendet und kann mit weniger Codezeilen als auf andere Weise verwendet werden.
Sehen wir uns den Code für die Demonstration der Funktion an.
Code-Auszug:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
$("#ele2").toggle(1500);
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Ausgabe:
-method-of-jquery-to-toggle.webp)
Verwenden Sie die Methoden hide() und show(), um zwischen Ausblenden und Anzeigen umzuschalten
Hier werden wir mit der Instanz des click-Ereignisses initiieren und später eine bedingte Anweisung generieren, um zu prüfen, ob der Inhalt sichtbar ist, wenn auf die Schaltfläche geklickt wird. Wenn es zu einem Wahrheitsfall führt, setzen wir es auf hide(); andernfalls setzen wir es auf show().
Lassen Sie uns die Codeblöcke überprüfen und den Prozess untersuchen.
Code-Auszug:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
var x = $('#ele2');
if(x.is(':visible')){
x.hide("slide");
}
else{
x.show("slide");
}
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Ausgabe:
-and-show()-method-to-toggle.webp)
