Come to Collapse un Div utilizzando jQuery

May 25

Come to Collapse un Div utilizzando jQuery


jQuery è un open source libreria JavaScript progettato per eseguire funzioni con script in una pagina web utilizzando le risorse lato client. In tal modo, si riduce la larghezza di banda necessaria per caricare ed elaborare tali funzioni da parte del server web. Un aspetto di jQuery che si possono trovare utili nei vostri sforzi di sviluppo web è la sua built-in capacità di cambiare istantaneamente gli stili di un contenitore DIV chiamato. Usando questa capacità, è possibile comprimere un DIV con un semplice clic del mouse.

istruzione

1 Aprire la pagina web con il contenitore DIV si desidera crollare in un editor di testo. Assicurarsi che il DIV è un elemento di stile un'altezza specificata e un valore "ID".

2 Inserire il seguente codice sotto il vostro contenitore DIV:

<Script>

$ ( "# Box"). Uno ( "click", function () {

$( this ).css( "height","-=200" );

});

</ Script>

Il vostro contenitore DIV sarà ora crollare in altezza di 200 pixel quando si fa clic. Sostituire il valore ID del vostro contenitore DIV per "box" e la quantità di pixel che si desidera diminuire l'altezza del div da quando viene cliccato per "200."

3 Salvare e pubblicare il documento. Tweak il valore numerico, se necessario.

Consigli e avvertenze

  • Questo tutorial presuppone che sia già incluso la libreria jQuery nella vostra pagina web. Se il DIV non collassa quando si fa clic, aggiungere il seguente codice all'interno del tag <head> tag del documento:
  • <Script type = "text / javascript" src = "script / jquery-1.2.6.min.js"> </ script>