problème jQuery slideToggle lorsque vous utilisez hauteur%

Je ne peux pas comprendre pourquoi slideToggle fait les 2 panneaux de croître en dehors de la div parent lorsque la hauteur utilise une valeur%:problème jQuery slideToggle lorsque vous utilisez hauteur%

<html> 
<head> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".flip").click(function(){ 
    $(".panel").slideToggle(5000); 
    $(".panel2").slideToggle(5000); 
    }); 
}); 
</script> 

<style type="text/css"> 
div.parent 
{ 
height:300px; 
width:600px; 
background:red; 
} 
div.panel,p.flip,div.panel2 
{ 
width:100%; 
margin:0px; 
padding:5px; 
text-align:center; 
background:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
div.panel 
{ 
height:100%; 
display:none; 
} 
div.panel2 
{ 
height:100%; 
} 
</style> 
</head> 

<body> 
<div class="parent"> 
    <div class="panel"> 
     <p>Panel 1: Because time is valuable</p> 
    </div> 
    <div class="panel2"> 
     <p>Panel 2: Because time is valuable</p> 
    </div> 
    <p class="flip">Show Panel</p> 
</div> 

</body> 
</html>

Cependant, quand je change la hauteur à une valeur px fixe, le comportement fonctionne comme prévu. Essentiellement, je veux que les deux panneaux glissent entre eux.

Source

2011-08-04 Steve

vous voudrez peut-être accepter des réponses à vos questions, si vous continuez à vouloir des réponses. Juste la courtoisie commune. – Michael

Je pense que c'est en raison de la valeur de la hauteur en%. 100% de 300 est 300. Donc quand panel1 croît à 100% par exemple 300px alors panel2 doit sortir du parent pour augmenter la hauteur. Vous devriez donner la hauteur en px pour le faire fonctionner comme prévu.

Source

2011-08-04 22:39:13 ShankarSangoli

Eh bien mon intérêt pour l'utilisation de% values est que dans mon projet à la maison, j'ai un div div défini à une valeur px spécifique et chaque enfant de ce div a un%, et chaque enfant de ces enfants a également%. Etc., etc. Je pensais que c'était une bonne idée car je n'aurais qu'à changer les valeurs de 2 px si je voulais redimensionner le site en conséquence. J'espérais que cette idée ne disparaîtrait pas lorsque j'aurais activé cet effet de bascule, mais il me semble que je devrais revenir à l'utilisation des valeurs px ou écrire un peu de travail en utilisant animate() – Steve

La clé à comprendre est de savoir que slideToggle modifie l'attribut de hauteur CSS de l'élément. De plus, vous avez une hauteur spécifiée sur vos panneaux comme 100% du parent. Cependant, vous avez également une balise P qui ne contient aucun espace dans le parent.

Cette situation de chevauchement d'éléments due à des définitions de hauteur invalides invalide les calculs de jQuery.

Ce correctif est montré ici: http://jsfiddle.net/DwTRQ/

Définissez le paragraphe d'avoir une position absolue, ou supprimer simplement à partir du panneau de parent. Oh, et je devrais aussi mentionner qu'en raison du fonctionnement du modèle de boîte CSS, avoir un élément réglé à 100% de hauteur ou de largeur avec un remplissage ne fonctionnera pas bien pour vous. Cela dépassera les limites des parents.

Source

2011-08-04 22:40:56

Compris, la balise p était juste pour identifier chaque div et avoir une idée de la façon dont le contenu serait effectué par la bascule. Dans mon projet à la maison, je prévois d'avoir une majorité du contenu effectué par cette diapositive. L'étape suivante consiste à comprendre comment le faire glisser vers la gauche et la droite sans déformer le contenu. Merci pour le conseil! – Steve

Steve, si vous avez trouvé ma réponse exacte, cliquez sur la coche qui se trouve à gauche de l'écran pour qu'il soit vert. –

problème jQuery slideToggle lorsque vous utilisez hauteur%

Répondre

Questions connexes