2010-11-15 15 views
0

En utilisant le code ci-dessous, j'ai un effet de masquage appliqué à certaines cellules de tableau dont la largeur est agrandie et réduite. Le problème est que lorsqu'on clique sur un lien, tout le texte apparaît, la table se redimensionne puis le texte disparaît. Je voudrais que le texte non cliqué reste caché et ne clignote pas à l'écran. Je pense que cela peut avoir quelque chose à faire avec preventDefault ou retourner False mais quand j'ai essayé ces derniers, il a arrêté la table de fonctionner après le premier clic. Je ne sais vraiment pas ce que je fais mal.JQuery - .preventDefault()

Comme toujours, toute aide grandement appréciée.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Levels of Progression</title> 
<style> 
body{font-family:Arial, Helvetica, sans-serif; font-size:80%;} 
table td{vertical-align:top; padding:5px;} 
table td div{width:80px; overflow:hidden; display:none;} 
table td .toggleSection1{width:200px; display:block;} 

.explore td{background:#c0da77;} 
#e1{color:#8BAD30; width:200px;} 
#express td{background:#cf7db4;} 
#e2{color:#cf7db4; } 
#exchange td{background:#58bccc;} 
#e3{color:#3AAABE;} 
#evaluate td{background:#ab91c4;} 
#e4{color:#8864AC;} 
#exhibit td{background:#f7b930;} 
#e5{color:#E3A209;} 

table td a{color:black; text-decoration:none; } 
table td a:hover{color:white; background:black; } 
table td.title{font-size:1.3em; font-weight:bold; padding-bottom:0; margin-bottom:0; vertical-align:bottom;} 
.levels{text-align:center; font-size:1.3em; font-weight:bold; background:#CCC; font-family:Georgia, "Times New Roman", Times, serif;} 
.title{ font-family:Georgia, "Times New Roman", Times, serif;} 
#exchange .none{color:white; color:#cdebf0; font-style:italic;} 
#evaluate .none{color:white; color:#e6deed; font-style:italic;} 

</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/thickbox.js"></script> 

<script type="text/javascript"> 
//<![CDATA[ 
function showSlidingDiv(column){ 

var maxWidth = 200; 
var smallWidth = 80; 
var smallHeight = 50; 
var myWidth = $(column).width(); 


    $("div").animate({width: smallWidth}, 400, function() { 

     $(this).hide(); 

    }); 


    $(column).animate({width: maxWidth}, 400, function() { 
    $(column).show(); 


}); 

} 

//]]> 
</script> 

</head><body> 

<table width="800" border="0" cellspacing="5"> 
    <tbody><tr> 
    <td>&nbsp;</td> 
    <td class="levels"><a href="" onClick="showSlidingDiv('.toggleSection1'); return false;">Level 1</a></td> 
    <td class="levels "><a href="" onClick="showSlidingDiv('.toggleSection2'); return false;">Level 2</a></td> 
    <td class="levels "><a href="" onClick="showSlidingDiv('.toggleSection3'); return false;">Level 3</a></td> 
    <td class="levels "><a href="" onClick="showSlidingDiv('.toggleSection4'); return false;">Level 4</a></td> 
    <td class="levels "><a href="" onClick="showSlidingDiv('.toggleSection5'); return false;">Level 5</a></td> 
    </tr> 
    <tr> 
    <td class="title" id="e1">Explore</td> 
    <td><div class="toggleSection1">Text here:</div></td> 
    <td><div class="toggleSection2">Text here:</div></td> 
    <td><div class="toggleSection3">Text here:</div></td> 
    <td><div class="toggleSection4">Text here:</div></td> 
    <td><div class="toggleSection5">Text here:</div></td> 
    </tr> 
    <tr class="explore"> 
    <td>Some text in here 

    </td> 
    <td><div class="toggleSection1">find and select information from a given digital source;</div> 
</td> 
    <td><div class="toggleSection2">find, select and use information from a given digital source;</div></td> 
    <td><div class="toggleSection3">research, select, edit and use information from given digital sources;</div> 
</td> 
    <td><div class="toggleSection4"> research, select, edit and use assets from a range of digital sources;</div> 
</td> 
    <td><div class="toggleSection5">research, select, edit, use and evaluate assets from a range of digital sources;</div> 
    </td> 
    </tr> 
</tbody></table> 


</body></html> 

Répondre

3

Le problème est que lors de l'animation, sera définie sur la propriété blockdisplay d'un élément. Envisagez de masquer/afficher du contenu avec la propriété CSS visibility à la place. (Un élément avec visibility:hidden occupera toujours sa place dans la mise en page, seul son contenu sera caché.)

+0

Est-ce que cela signifie qu'il ne sera pas redimensionné correctement s'il est simplement caché? Je vais faire un tourbillon quand même. Merci pour la réponse. – Keith

+0

Remplacé avec cela, a travaillé très bien merci. – Keith