JQuery - .preventDefault()

Используя приведенный ниже код, у меня есть эффект скрытия, применяемый к некоторым ячейкам таблицы, которые также расширяют и сворачивают их ширину. Проблема в том, что при нажатии ссылки появляется весь текст, таблица меняет размер, а текст исчезает. Я хотел бы, чтобы незакрепленный текст оставался скрытым и не мигал на экране. Я думаю, что это может иметь какое-то отношение к preventDefault или возвращать False, но когда я это пробовал, он остановил работу таблицы после первого щелчка. На самом деле не уверен, что я делаю неправильно.JQuery - .preventDefault()

Как всегда, любая помощь очень ценится.

<!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>

источник

2010-11-15 Keith

Проблема заключается в том, что во время анимации, свойства элемента display будет установлен в block. Рассмотрите возможность скрытия/отображения содержимого с помощью свойства CSS visibility. (Элемент с visibility:hidden будет по-прежнему занимать свое место в макете, только его содержимое будет скрыто.)

источник

2010-11-15 16:58:12

Означает ли это, что он не изменится правильно, если он просто скрыт? В любом случае, я дам ему завихрение. Спасибо за ответ. – Keith

Заменил его этим, отлично поработал. – Keith

JQuery - .preventDefault()

ответ

Смежные вопросы