Nwlapcug.com


Come nascondere il codice Div jQuery

Come nascondere il codice Div jQuery


Nascondere le sezioni di una pagina Web o dettagli sotto titoli può contribuire a fornire un aspetto ordinato che rende una pagina più attraente, specialmente per notizie o informazioni relative pagine. Codifiche complesse è necessario per costruire il tipo di funzionalità in JavaScript che consente di mostrare o nascondere le sottosezioni come e quando richiesti. Tuttavia, JQuery, una libreria di funzioni JavaScript, permette di realizzare il compito facilmente e genericamente.

Istruzioni

1

Scarica la libreria JQuery jquery-1.5.1min.js dal link per il download fornito nella sezione riferimenti. Nella casella di dialogo di download, selezionare "Salva con nome" e salvare la libreria sul desktop.

2

Copiare e incollare il codice seguente nel blocco note e salvarlo come hidediv.html sul tuo desktop. Questo consiste di quattro strati di div annidati con collegamenti per visualizzare o nascondere ogni div annidati. Il DIV ID e link ID come "pecora", "sheep_1," ecc. indicare il nome della sezione e livello nidificato DIV.

< html >< testa >

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

< / testa >< corpo >

< div id = 'pecora' > Baa baa black sheep, avete qualsiasi lana?

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

< div id = 'sheep_1' > Yes sir, sì, Signore, tre borse piene,

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

< div id = 'sheep_2' > uno per il mio padrone, uno per mio dame,

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

< div id = 'sheep_3' > e uno per il ragazzino che vive nella nostra corsia.

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

< script >

< / script >< corpo >< / html >

3

Copiare e incollare il seguente "toggleDiv()" funzione JQuery, sopra la linea "< / script >< / corpo >< / html >," affinché venga eseguita dopo il caricamento di tutti gli oggetti HTML. Questa funzione di JQuery accetta l'ID di visualizzare o nascondere link, ad esempio "sheep_1," come parametro e nasconde o Mostra che il prossimo nidificati DIV a seconda se l'attributo "isShowing" attualmente è impostato su "Sì" o "no". Viene utilizzato il metodo di "fadeToggle()" di JQuery per alternare tra i due Stati. Le ultime tre righe nascondono tutti i livelli, dal livello del nipote e sotto per garantire che solo il livello figlio correntemente selezionato viene visualizzato sulla selezione.

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

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

Se (($(' 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

Copiare e incollare la funzione di evento click dopo la fine della funzione "jQuery.fn.toggleDiv". Ogni volta che viene fatto clic su un link con classe "showOpt", chiama la funzione toggleDiv con l'ID corrente come parametro.

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

$.toggleDiv(this.id) ();

});

5

Copiare e incollare la seguente riga dopo la fine della precedente funzione di evento click. Quando viene caricata la pagina, tutti i div annidati vengono visualizzati per impostazione predefinita. Questa riga deve essere aggiunto, così che solo quando la pagina al termine del caricamento, sono nascosti tutti i div sotto le "pecore" DIV.

$.toggleDiv('sheep') ();

6

Salvare hidediv.html e la pagina di prova facendo clic su Mostra e Nascondi collegamenti.

Consigli & Avvertenze

  • Per modificare l'effetto di animazione del mostrando e nascondendo, è possibile utilizzare "slideToggle()" o "toggle()" invece di "fadeToggle()."