2013-03-22 24 views

risposta

12

Si potrebbe mettere in un contenitore e la posizione assolutamente ?:

HTML:

<a href="#" id="menu">click me for menu</a> 
    <div id="cont"> 
    <div id="test"></div> 
</div> 

CSS:

#cont{ 
    height:500px; width:50px; position:relative; 
} 
#test{ 
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0; 
} 

JavaScript:

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
     }, 290, function() { 
    }); 
}); 

Fiddle

Edit: Perché funziona
ho messo un contenitore all'interno del menu e dato che lo stile position:relative. Quello che presumo di essere un menu (#test) è stato dato lo stile position:absolute significa che è possibile posizionarlo in base alle top, right, bottom e left, relativa all'elemento che contiene (purché abbia un position diverso da quello predefinito, quindi, diamo la contenitore a posizione relative). Se assegniamo l'elemento a top:0;left:0, l'elemento in alto a sinistra dell'elemento rimarrà nella parte in alto a sinistra del suo genitore, allo stesso modo, se abbiamo fatto top:0;bottom:0, l'elemento in basso a sinistra di questo elemento sarebbe rimasto in basso a sinistra del suo elemento principale. Rambling, non sono io? Quindi, per riassumere, #test è "bloccato" nella parte inferiore del suo genitore, quindi si anima dal basso. Un altro punto rapido, l'altezza dei contenitori è importante! Poiché abbiamo assegnato a #test una posizione assoluta, non sposterà il contenitore all'altezza, quindi impostiamo l'altezza per garantire carichi di #test 500 px dalla parte superiore del contenitore.

+1

Mi hai battuto. Stavo cercando di capire come risolvere il caso base. :(http://jsfiddle.net/uWnjx/7/ Ho finito per fare un clic falso alla fine per risolvere il problema: – Sanchit

+0

grazie, esattamente quello di cui ho bisogno, ma una domanda ... non riesco davvero a capire cosa esattamente sta succedendo lì, perché è con quelle proprietà che funzionano dal basso verso l'alto? potresti darmi una spiegazione per farmi capire! – supersize

+1

L'altezza aumenta sempre verso il basso. Possiamo costringerlo ad aumentare verso l'alto (fai sembrare che aumenti verso l'alto) se diciamo che non c'è più 'down' puoi andare. Questo si ottiene usando css con posizionamento assoluto e dicendogli 'bottom: 0;' – Sanchit

Problemi correlati