jQuery schaltet das Beispiel um, um Inhalte anzuzeigen und auszublenden
The requirement: Wir müssen einen reduzierbaren Inhalt anzeigen, wenn wir auf die Schaltfläche "Anzeigen" geklickt haben, und den reduzierbaren Inhalt ausblenden, wenn wir auf die Schaltfläche "Ausblenden" geklickt haben.
The solution: jQuerytoggle() Funktion.
Demo: Klicken Sie auf die Schaltfläche "Anzeigen".
1. Zusammenlegbarer Inhalt
Unten finden Sie ein Beispiel für HTML für komprimierbaren Inhalt:
Use jQuery toggle to hide/show collapse content
Das "div" -Element in über<div id="collapse1" style="display:none"> ist ausgeblendet. Um den Inhalt anzuzeigen, wenn wir auf die Schaltfläche "Anzeigen" geklickt haben, müssen wir ein Klickereignis für die Schaltfläche "Anzeigen" wie folgt erstellen:
$('.nav-toggle').click(function(){
//logic to show/hide collapsable content
});
2. Holen Sie sich den Selektor
Holen Sie sich den Selektor für komprimierten Inhalt aus dem Attribut href:
var collapse_content_selector = $(this).attr('href');
3. Zum Anzeigen und Ausblenden umschalten
Verwendet den jQuery-Schalter, um den komprimierbaren Inhalt wie folgt anzuzeigen / auszublenden:
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
4. Vollständiges Beispiel
jQuery toggle to display and hide content
jQuery toggle() to hide/show collapse content
Quellcode herunterladen
Laden Sie es herunter -jQuery-toggle-to-display-hide-content.zip (1kb)