问JQuery - .preventDefault()
EN

Stack Overflow用户

提问于 2010-11-16 00:38:12

回答 1查看 603关注 0票数 0

使用下面的代码，我将隐藏显示效果应用于一些表格单元格，这些单元格的宽度也是展开和折叠的。问题是，当点击一个链接时，所有的文本都会显示出来，表格会调整大小，然后文本就会消失。我希望未点击的文本始终保持隐藏，而不是在屏幕上闪光。我认为这可能与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>

jquery

animation

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-11-16 00:58:13

问题是在动画过程中，元素的display属性将被设置为block。考虑使用CSS属性visibility来隐藏/显示内容。(带有visibility:hidden的元素仍将占据其在布局中的位置，只有其内容将被隐藏。)

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4186623

复制

相似问题

问JQuery - .preventDefault()
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery - .preventDefault()EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery - .preventDefault()
EN