Question

使用下面的代码我有一个隐藏显示效果应用于一些表格单元格，这些表格单元格的宽度也展开和折叠。问题是，当单击链接时，所有文本都会显示，表格会调整大小，然后文本消失。我希望未被删除的文本始终隐藏，而不是在屏幕上闪烁。我认为这可能与preventDefault有关，或者返回False，但是当我尝试这些时，它在第一次点击后就停止了表的工作。真的不确定我做错了什么。

一如既往，任何帮助都非常感激。

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

Answer 1

问题是在动画期间，元素的display属性将设置为block。考虑使用CSS属性visibility隐藏/显示内容。（具有visibility:hidden的元素仍将占据布局中的位置，只会隐藏其内容。）

JQuery - .preventDefault（）

1 个答案: