Zum Ausblenden von Div-Code jQuery

Ausblenden von Bereichen einer Web-Seite oder Details unter Schlagzeilen kann helfen, eine ordentliche Darstellung zu erzielen, die einer Seite mehr macht attraktiv, insbesondere für Nachrichten oder Informationen-bezogenen Seiten. Komplexe Programmierung wird benötigt, um die Art der Funktionen in JavaScript zu bauen, mit dem Sie ein- oder Ausblenden der Unterabschnitte und bei Bedarf. JQuery, eine Bibliothek von JavaScript-Funktionen, ermöglicht jedoch die Aufgabe zu erfüllen, einfach und allgemein.

Anweisungen

1 Laden Sie die JQuery-Bibliothek Jquery-1.5.1min.js von den Download-Link bereitgestellt, die im Abschnitt Informationsquellen. Wählen Sie in der Download-Dialog-Box "Ziel speichern unter..." und speichern Sie die Bibliothek auf Ihrem Desktop.

2 Kopieren Sie und fügen Sie den folgenden Code in den Editor, und speichern Sie sie als hidediv.html auf Ihrem Desktop. Diese besteht aus vier Schichten von verschachtelten DIVs mit Links zum Anzeigen oder ausblenden jedes verschachtelte DIV. Die DIV ID und Link-IDs wie "Schafe", "sheep_1," etc. Geben Sie den Bereichsnamen und verschachtelten DIV-Ebene.

< html >< Kopf >

< Skript-Typ = "Text/Javascript" Src = "Jquery-1.5.1.min.js >< / script >

< / Kopf >< Körper >

< Div Id = 'Schaf' > Baa Baa Black Sheep, haben Sie wolle?

< a Href = '#a1' Id = 'Schaf' Class = 'ShowOpt' >< / a >

< Div Id ='sheep_1' > Yes Sir, Yes Sir, drei Taschen voll,

< a Href = '#a1' Id ='sheep_1' Class = 'ShowOpt' >< / a >

< Div Id ='sheep_2' > eine für meinen Master, eine für meine Dame

< a Href = '#a1' Id ='sheep_2' Class = 'ShowOpt' >< / a >

< Div Id ='sheep_3' > und einen für die kleinen Jungen, die das Leben in unserer Gasse.

< / Div >< / Div >< / Div >< / Div >

< Skript >

< / script >< Körper >< / html >

3 Kopieren und fügen Sie die folgende "toggleDiv()" JQuery-Funktion, oberhalb der Zeile "< / script >< / body >< / html >," damit es ausgeführt wird, nachdem die HTML-Objekte geladen wurden. Diese JQuery-Funktion sind die ein- oder ausblenden-Link-ID, z. B. "sheep_1," als Parameter und Häuten oder zeigt die nächste verschachtelte DIV je nachdem ob das Attribut "IsShowing" ist derzeit eingestellt auf "Ja" oder "Nein". Es wird die JQuery-Methode "fadeToggle()" um zwischen den beiden Staaten. Die letzten drei Zeilen ausblenden alle Ebenen von der Enkel-Ebene und darunter, um sicherzustellen, dass nur die aktuell ausgewählte Kind-Ebene auf Auswahl angezeigt wird.

{jQuery.fn.toggleDiv=function(id)}

$('div:[id="'+id+'"]').children('div').fadeToggle('slow');

Wenn (($(' Div: [id="'+id+'"]').children('div').attr('isShowing'))=='no') {}

$('div:[id="'+id+'"]').children('div').attr('isShowing','yes');

$('a:[id="'+id+'"]').html('(hide...)');

} else {}

$('div:[id="'+id+'"]').children('div').attr('isShowing','no');

$('a:[id="'+id+'"]').html('(show...)');

}

$('div:[id="'+id+'"]').children('div').find('a').html('(show...)');

$('div:[id="'+id+'"]').children('div').find('div').hide();

$('div:[id="'+id+'"]').children('div').find('div').attr('isShowing','no');

}

4 Copy & paste die Klick-Ereignis-Funktion nach dem Ende der "jQuery.fn.toggleDiv"-Funktion. Wenn eine Verbindung mit der Klasse "ShowOpt" geklickt wird, wird die ToggleDiv-Funktion mit der aktuellen-ID als Parameter.

$(' ein: [class="showOpt"]').click(function(e) {}

$ ().toggleDiv(this.id);

});

5 Kopieren Sie und fügen Sie die folgende Zeile nach dem Ende der vorhergehenden Click-Ereignis Funktion. Wenn die Seite geladen wird, werden die verschachtelten DIVs standardmäßig angezeigt. Diese Zeile muss hinzugefügt werden, so dass nur, wenn die Seite vollständig geladen wurde, alle DIVs unterhalb der "Schafe" DIV ausgeblendet sind.

$ () .toggleDiv('sheep');

6 Speichern Sie hidediv.html zu und testen Sie die Seite, indem Sie auf die Karte und verbergen Sie Links.

Tipps & Warnungen

• Um den Animationseffekt für das Anzeigen und ausblenden zu ändern, können Sie "slideToggle()" oder "toggle()" statt "fadeToggle()."