Hur att dölja Div kod jQuery

October 20

Hur att dölja Div kod jQuery


Dölja delar av en webbsida eller detaljer i rubriker kan bidra till att ge en snyggt utseende som gör en sida mer tilltalande, särskilt för nyheter eller informationsrelaterade sidor. Komplexa kodning krävs för att bygga den typ av funktionalitet i JavaScript som låter dig visa eller dölja underavdelningar och när den behövs. Men jQuery, ett bibliotek av JavaScript-funktioner, kan du utföra uppgiften lätt och generiskt.

Instruktioner

1 Ladda ner jQuery biblioteket jQuery-1.5.1min.js från nedladdningslänken i avsnittet Referenser. I nedladdnings dialogrutan, välj "Spara som ..." och spara biblioteket på skrivbordet.

2 Kopiera och klistra in följande kod i Anteckningar, och spara den som hidediv.html på skrivbordet. Den består av fyra skikt av kapslade DIV med länkar för att visa eller dölja varje kapslade DIV. De div id och länk ID som "får", "sheep_1" etc. indikerar avsnittsnamnet och kapslade DIV nivå.

<Html> <head>

<Script type = "text / javascript" src = "jquery-1.5.1.min.js> </ script>

</ Head> <body>

<Div id = "får"> Bä, bä, vita lamm, har du någon ull?

<a href='#a1' id='sheep' class='showOpt'> </a>

<Div id = "sheep_1> Yes sir, ja sir, tre påsar fulla,

<a href='#a1' id='sheep_1' class='showOpt'> </a>

<Div id = "sheep_2> En för min herre, en för min dame,

<a href='#a1' id='sheep_2' class='showOpt'> </a>

<Div id = "sheep_3> Och en för liten pojke som bor i vår bana.

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

<Script>

</ Script> <body> </ html>

3 Kopiera och klistra in följande "toggleDiv ()" jQuery funktion, ovanför linjen "</ script> </ body> </ html>," så att de körs efter att alla HTML-objekt har laddats. Detta JQuery funktionen tar show-eller-hide länkidentifierare, t.ex. "sheep_1," som en parameter och hudar eller visar nästa kapslade DIV beroende på om attributet "isShowing" är inställd på "ja" eller "nej". Det använder JQuery "fadeToggle ()" metod för att växla mellan de båda staterna. De tre sista raderna dölja alla nivåer från barnbarn nivå och nedan för att säkerställa att endast den valda underordnad nivå visas på val.

jQuery.fn.toggleDiv = funktion (id) {

$ (Div: [id = " '+ id +'"] ").. Barn (div) fadeToggle (" långsam ");

if (($ (.. "div: [id =" '+ id +' "]") barn (div) attr (isShowing)) == "nej") {

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

. $ (A: [id = " '+ id +'"] ") html (" (dölja ...) ');

} Else {

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

$ (A: [id = " '+ id +'"] ") html (" (visa ...) ');.

}

$ (Div: [id = " '+ id +'"] ") barn (div) hitta (" a ") html (" (visa ...) ');...

$ (Div: [id = " '+ id +'"] ") barn (div) hitta (div) hide ();...

$... (Div: [id = " '+ id +'"] ") barn (div) hitta (div) attr (isShowing", "nej");

}

4 Kopiera och klistra in klickhändelsefunktionen efter utgången av den "jQuery.fn.toggleDiv" -funktion. När en länk med klass "showOpt" klickas, kallar det toggleDiv funktion med den aktuella ID som parameter.

$ (A: [class = "showOpt"] "). Klicka på (funktion (e) {

$ () ToggleDiv (this.id).

});

5 Kopiera och klistra in följande rad efter utgången av den föregående klick händelse funktion. När sidan laddas, är alla kapslade DIV visas som standard. Denna linje måste läggas så att just när sidan har laddats klart, är alla DIV under "fåren" DIV gömd.

. $ () ToggleDiv (får);

6 Spara hidediv.html och testa sidan genom att klicka på visa och dölja länkar.

Tips

  • Om du vill ändra animeringseffekten av visa och dölja, kan du använda "slideToggle ()" eller "toggle ()" i stället för "fadeToggle ()."

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2023 Astrixsoft.com | Contact us: webmaster# astrixsoft.com